Stylize overflow hidden

Navigation
0

I have ul that has "n" li s set vertically.

Initially, it is stylized overflow hidden , only for a part of it, specifically from the second li to simulate a select option .

However, when I click on the first li , I type overflow visible and so the other li s appear.

I would like to have this overflow visible not appear at once.

I would like to apply both a open / close effect as a roller to the opening when closing ( visible, hidden ).

Is it possible?

The code is from the site in this link .

    
asked by anonymous 02.10.2017 / 22:31

3 answers

0

Instead of trying to create a custom select from scratch, why not simply use a real select and customize it using some jQuery plugin (since you're actually using jQuery), a very good plugin example is the < a href="http://marcj.github.io/jquery-selectBox/"> link

So instead of having all the difficulty of getting the value of your select with ul and li using .text() and maybe being forced to use $.trim , you can simply use $("select").val(); and it will have the value

See an example usage: 

$('select.customizado').selectBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://cdn.rawgit.com/marcj/jquery-selectBox/316c77f1/jquery.selectBox.css" rel="stylesheet"/>

<script src="https://cdn.rawgit.com/marcj/jquery-selectBox/316c77f1/jquery.selectBox.js"></script><selectclass="customizado combo-1">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</select>

<button onclick="console.log($('.combo-1').val());">Troque o valor e clique aqui</button>

<hr>

<select class="customizado combo-2">
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
<option value="foobar">Foo bar</option>
<option value="barbaz">Bar baz</option>
<option value="bazfoo">Baz foo</option>
</select>

<button onclick="console.log($('.combo-2').val());">Troque o valor e clique aqui</button>
    
03.10.2017 / 00:12
0

You will achieve the effect you want by using slideDown() (see commented lines that were added in the JS code that handles <ul> ): 

$(".selectOptions .selectOption").click('live', function(e) {

      if(contador % 2 == 0) {
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul").css("overflow", "visible");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);
      } else {    
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
              $(".selectOptions .selectOption ul").css("overflow", "hidden");
          });
      }

        e.stopPropagation();
      contador++;
  });


$(document).ready(function(e) {
  /*Esconde o select*/
  $(".selectOptions select").css("display", "none");

  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });
    
  /*cria um contador para contar as aberturas e fechamentos da ul*/
  contador = 0;

  /*ao clicar na ul, abre/fecha a ul*/
  $(".selectOptions .selectOption").click('live', function(e) {

      if(contador % 2 == 0) {
          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul").css("overflow", "visible");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);
      } else {    
          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
			  $(".selectOptions .selectOption ul").css("overflow", "hidden");
		  });
      }

		e.stopPropagation();
      contador++;
  });	

	$(document).on('click',function(e){
		if($(".selectOptions .selectOption ul").css("overflow") == "visible"){
			$(".selectOptions .selectOption").trigger("click");
		}
		e.stopPropagation();
	});
  
  /*ai clicar na li, busca correspondêcia na select option e o checa (marca)*/
   //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
   $( '.selectOptions .selectOption ul li' ).on( 'click', function( evt ){ 
       /*Joga a li selecionada ao topo da ul*/
	   $($(this).closest('ul')).prepend($(this)); 
	    // Armazena nome do mês que quer selecionar
		var li = $(this).attr("id");
		// Guarda em opcao o elemento que retornar do filtro que vai testar entre as
		// options possíveis
		var opcao = $('.selectOptions select option').filter(function() {
			// testa entre as options qual delas tem o mesmo conteúdo que o desejado
			return $(this).attr('value') === li;
		});
	
		// Redefine o atributo do elemento encontrado pra selecionado.
		opcao.attr('selected', true);		   
		   
   });

});
@charset "utf-8";
/* CSS Document */
.selectOptions {
	position: relative;
}
.selectOptions select {
	display: none;
}
.selectOptions .selectOption:after {
	position: absolute;
	content: "";
	display: block;
	top: 1px;
	right: 1px;
	width: 33px;
	height: 33px;
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaBaixo:after {
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaBaixo.jpg);
}
.selectOptions .selectOption.setaCima:after {
	background-image: url(http://www.hotplateprensas.com.br/estilos/_imgs/setaCima.jpg);
}
.selectOptions .selectOption, 
.selectOptions .selectOption  ul {
	position: relative;
	width: 200px;
	height: 35px;
	background-color: rgba(0,0,0,0.2);
}
.selectOptions .selectOption  ul {
	position: relative;
	overflow: hidden;
	list-style: none;
}
.selectOptions .selectOption  ul li {
	width: 100%;
	height: 31px;
	line-height: 31px;
	cursor: pointer;
	padding: 2px;
	color: rgb(255,255,255);
	background-color: rgb(240,240,240);
	border-bottom: rgba(0,0,0,.1) 1px solid;
}
.selectOptions .selectOption  ul li:hover,
.selectOptions .selectOption  ul >:first-child {
	color: rgb(255,255,255);
	background-color: rgba(0,0,0, .1);
}
.selectOptions .selectOption  ul li:hover + .selectOption:after {
	color: rgba(0,0,0, .1);
	background-color: rgb(255,255,255);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="selectOptions">
      <select name="select" required>
        <option value="1">um</option>
        <option value="2">dois</option>
        <option value="3">Tres</option>
      </select>
      <div class="selectOption">
        <ul></ul>
      </div>
   </div>
    
02.10.2017 / 23:29
0

@dvdsamm, I think I got the final effect.

But something is not legal. When you close the ul , then there is a delay in relation to the contraction of the parent div of ul. Where did I go wrong? 

$(document).ready(function(e) {

  /*popula as li's*/
  $(".selectOptions select > option").each(function() {
      $(".selectOptions .selectOption ul").append("<li id="+this.value+">"+this.text+"</li>");
  });

  /*cria um contador para contar as aberturas e fechamentos da ul*/
  contador = 0;

  /*ao clicar na ul, abre/fecha a ul*/
  $(".selectOptions .selectOption").click(function(e) {

      quantasLis = $(".selectOptions .selectOption ul li" ).length; 

      if(contador % 2 == 0) {                 

          $(".selectOptions .selectOption").addClass("setaCima").removeClass("setaBaixo");
          $(".selectOptions .selectOption ul li:not(:first)").css("display","none").slideDown(400);

          if(quantasLis > 4) {        
              $(".selectOptions .selectOption ul").css("width", "217px");
              $(".selectOptions .selectOption ul").css('height', '175px');
              $(".selectOptions .selectOption ul").css("overflow-y", "scroll") ;
          } else {
              $(".selectOptions .selectOption ul").css("width", "200px");
              $(".selectOptions .selectOption ul").css('height', 'auto');
          }

      } else {    

          $(".selectOptions .selectOption").addClass("setaBaixo").removeClass("setaCima");
          $(".selectOptions .selectOption ul").css("width", "200px");
          $(".selectOptions .selectOption ul li:not(:first)").slideUp(400, function(){
              $(".selectOptions .selectOption ul").css("overflow-y", "scroll");
              $(".selectOptions .selectOption ul").css('height', '35px');
          });
      }

      e.stopPropagation();
      contador++;
  });   

  $(document).on('click',function(e){
      if($(".selectOptions .selectOption ul").css("overflow") == "visible"){
          $(".selectOptions .selectOption").trigger("click");
      }
      e.stopPropagation();
  });

/*ai clicar na li, busca correspondêcia na select option e o checa (marca)*/
 //$(".selectOptions .selectOption ul li:not(:eq(0))").on( 'click',function(evt){
 $( '.selectOptions .selectOption ul li' ).on( 'click', function( evt ){ 
     /*Joga a li selecionada ao topo da ul*/
     $($(this).closest('ul')).prepend($(this)); 
      // Armazena nome do mês que quer selecionar
      var li = $(this).attr("id");
      // Guarda em opcao o elemento que retornar do filtro que vai testar entre as
      // options possíveis
      var opcao = $('.selectOptions select option').filter(function() {
          // testa entre as options qual delas tem o mesmo conteúdo que o desejado
          return $(this).attr('value') === li;
      });

      // Redefine o atributo do elemento encontrado pra selecionado.
      opcao.attr('selected', true);        

 });

});
    
04.10.2017 / 14:02
What is the relationship problem in these tables? php file_get_contents follow url