styling an ul that will select

Question

styling an ul that will select

Navigation

#1 by (0 votes)

0

I'm studying here, but to learn a little bit myself, and I'm trying to develop a select option with a ul starting from select .

The population of ul is already correct.

$(".selectOption").on("click", function() {
  $(".opcoes").css("overflow", "visible");
}); 

$(".opcoes li").on("click", function() {
  $(".opcoes").css("overflow", "hidden");
}); 

$("#select > option").each(function() {
  $(".opcoes").append("<li id="+this.value+">"+this.text+"</li>");
});

@charset "utf-8";
/* CSS Document */
    
* {
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
}

body {
  margin: 0 auto;
  width: 800px;
}

#select {
  display: none;
}

.selectOption:after {
  position: absolute;
  display: block;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 50px;
  background-image: url(_imgs/setaBaixo.jpg);
}

.selectOption, .opcoes {
  width: 200px;
  height: 35px;
  background-color: rgba(0,0,0,0.2);
}

.opcoes {
  overflow: hidden;
  list-style: none;
  z-index: -1;
}

.opcoes li {
  width: 100%;
  height: 31px;
  line-height: 31px;
  cursor: pointer;
  padding: 2px;
  color: rgb(0,0,0); /* alterado para visualizar melhor */
  background-color: rgb(240,240,240);
  border-bottom: rgba(0,0,0,.1) 1px solid;
}

.opcoes li:active {
  color: rgb(255,255,255);
  background-color: rgba(0,0,0, .1);
}

.opcoes li:hover + .selectOption:after {
  color: rgba(0,0,0, .1);
  background-color: rgb(255,255,255);
  background-image: url(_imgs/setaCima.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><selectname="select" id="select">
  <option value="1">um</option>
  <option value="2">dois</option>
  <option value="3">Tres</option>
</select>

<div class="selectOption">
  <ul class="opcoes">
     <li id="">Escolha a opção abaixo</li>
  </ul>
</div>

My goal now is to get clicar to li , ul retract, ie return to overflow:hidden . But what I did did not solve.

Another difficulty I'm having is to put the figure of a arrow on the top right of ul p>

Thanks to anyone who can help

jquery css3

asked by anonymous 29.09.2017 / 20:04

1 answer

Display the result of a content posted to a table in the mysql database where it already has its css..but it does not work on the frontend How do I get my App to receive notification even closed or blocked

score 0 · Answer 1

Your first listener in .selectOption should be re-displaying options whenever you click on any option. This is because events propagate to the parent elements. To prevent this from happening, try to use the event.stopPropagation() and event.preventDefault() function in the listener that hides the options:

// lembre de receber o argumento 'event'
$(".opcoes li").on("click", function(event) {
    $(".opcoes").css("overflow", "hidden");
    event.stopPropagation();
    event.preventDefault();
});

On the arrow, you must use the content property when using :after or :before :

.selectOption:after {
    content: "";
    position: absolute;
    display: block;
    ...
    background-image: url(_imgs/setaBaixo.jpg);
}