点击下拉列表

Question

我很好奇，如何通过点击链接更改下拉列表打开和关闭的代码。因为现在它也会关闭并打开，如果你点击下拉本身的主体。

$(document).ready(function(){

  $( "ul" ).click(function() {
    $(this).children('li:not(.init)').slideToggle(0);
    $(this).find("li.init").toggleClass("init1");
  });

});

.selectContainer ul{
	width:200px;
}

.selectContainer ul li
  {
    border:1px solid green;
    width:100%;
    cursor:pointer;
	list-style: none;
  }
  
.selectContainer ul li:not(.init){
    display:none;
    float:left;
  }
 li.init{position:relative;}
 li.init:after{content:"\2193 ";position:absolute;right:5px;}
 li.init1:after{content:"\2191 ";position:absolute;right:0;}

<div class="selectContainer">
            <ul>
                <li class="init">Select</li>
                <li data-value="value 1">Option 1</li>
                <li data-value="value 2">Option 2</li>                                                          
            </ul>
  </div>

Answer 1

您使用$( "ul" )查询“ul”元素，并将其定义为click。显然，它之后的所有空间都是ul元素的一部分。

为什么不尝试设置$("li.init").click。在函数内部，您可以像在示例中一样查询“ul”。但是设置“li”的.click。

Answer 2

您可以尝试：

 $( "ul li.init" ).click(function(e) {  
     $('li:not(.init)').slideToggle(0);
     $(this).toggleClass("init1");   
   });