0

Tenho uma ul que possui "n" lis dispostas verticalmente.

Inicialmente, ela está com estilizar overflow hidden, apenas para uma parte dela, especificamente a partir da segunda li para simular uma select option.

No entanto, quando clico na primeira li, faço estilizar overflow visible e assim as outras lis aparecem.

Gostaria de fazer com que esse overflow visible não aparecesse de uma só vez.

Gostaria de aplicar tanto na abertura quando no fechamento (visible, hidden) um efeito de abrir/fechar como se fosse um rolo.

Será que é possível?

O código é do site neste link.

6
  • Com overflow não é possível, ou vai ficar aberto/visible, ou fechado/hidden. Você vai precisar trabalhar com o height.
    – bfavaretto
    Commented 2/10/2017 às 20:34
  • pode dar um exemplo? Commented 2/10/2017 às 20:35
  • Acho que entendi a pergunta. Tô elaborando uma resposta.
    – Sam
    Commented 2/10/2017 às 20:37
  • bacana. Estou na espera. Commented 2/10/2017 às 21:02
  • Não seria mais fácil usar um plugin pra jQuery pronto, segue um exemplo pt.stackoverflow.com/a/242696/3635?
    – Syzoth
    Commented 4/10/2017 às 19:10

3 Respostas 3

0

Ao invés de tentar criar um select customizado do zero, porque não simplesmente usa um select de verdade e customiza ele usando algum plugin para jQuery (já que você está de fato usando jQuery), um exemplo de plugin muito bom é o http://marcj.github.io/jquery-selectBox/

Assim ao invés de ter toda a dificuldade de pegar o valor do seu select com ul e li usando .text() e talvez sendo obrigado a usar $.trim, você pode simplesmente usar $("select").val(); e terá o valor

Veja um exemplo de uso:

$('select.customizado').selectBox();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="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>

<select class="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>

0

Você vai conseguir o efeito que deseja usando slideDown() (veja as linhas comentadas que foram adicionadas no código JS que manipula 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).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>
    <div class="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>

16
  • O que é click('live'? até aonde sei em jQuery isso não existe, você deve estar falando do live('click') e acabou invertendo, de qualquer a função já foi descontinuada e trocada pelo delegate que fica embutindo dentro do .on() dentro de uso o contexto na ordem correta.
    – Syzoth
    Commented 2/10/2017 às 21:54
  • @GuilhermeNascimento Realmente não conheço. Eu apenas deixei o código como estava e mexi apenas no que era relevante. Aliás, nem mexi em nada, apenas adicionei 2 linhas :)
    – Sam
    Commented 2/10/2017 às 21:57
  • Você pode até me achar um chato, excessivamente detalhista a um ponto de quase paranoia, mas eu sempre vou ser a favor de especular provaveis origens do problema ao invés de apenas tentar entregar uma possivel solução. Programação é assim, as vezes era pra funcionar, mas outro código ali meu conflitou e causou um problema inesperado que ninguém percebeu. Mas é isso ae opinião pessoal mesmo.
    – Syzoth
    Commented 2/10/2017 às 22:06
  • @GuilhermeNascimento Eu entendo. Eu geralmente, quando vejo problemas absurdos no código que não tem a ver com o problema, eu melhoro e dou possíveis dicas. Neste caso aqui, eu nem tinha percebido esse "live", embora ele não cause nenhum efeito no código.
    – Sam
    Commented 2/10/2017 às 22:08
  • Mas deixa eu te perguntar 2 coisas: 1) tem como na hora de fechar aplicar o mesmo efeito? 2) E o lance de ao clicar fora (deixar a ul), como consigo fechar ela fechar? Commented 2/10/2017 às 22:47
0

@dvdsamm, acho que consegui o efeito final.

Mas alguma coisa não está legal. Quando fecha a ul, então está havendo um atraso em relação à contração da div pai da ul. Onde foi que errei?

$(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);        

 });

});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .