javascript - 将 "select"下拉列表转换为列表下拉列表后，div 显示/隐藏停止工作

Question

我想要一个 ul，而不是“选择”类型的下拉列表。但是，转换为 ul 后，我的 JavaScript 没有触发，我不明白为什么。它作为 Select 效果很好...我错过了什么吗？

这是原始的 Select(工作)

<div class="container">
    <select id="selector1" name="divshowhide">
      <option selected disabled value="null">Sort By:</option>
      <option value="#Online-holder">Online Now</option>
      <option value="#Lowest-holder">Lowest Price First</option>
      <option value="#Best-holder">Best Rating First</option>
    </select>
</div>

这是 ul 版本:(不起作用)

<li><a href="#">Sort</a>
    <ul class="dropdown" id="selector1">
        <li><a href="#" value="Online-holder">Online Now</a></li>
        <li><a href="#" value="Lowest-holder">Lowest Price First</a></li>
        <li><a href="#" value="Alpha-holder">Alpha</a></li>
    </ul>
</li>

这是 JavaScript:

<script type="text/javascript"> 
$(document).ready(function() {

  $('#Online-holder').show();
  $('#Online-link').click(function() {
    $('#Online').toggle(400);
    return false;
  });


  $('#Lowest-holder').hide();
  $('#Lowest-link').click(function() {
    $('#Lowest').toggle(400);
    return false;
  });


  $('#Alpha-holder').hide();
  $('#Alpha-link').click(function() {
    $('#Alpha').toggle(400);
    return false;
  });

});

jQuery("#selector1").change(function(){
    var div = jQuery(this).val();
    $('.holder').hide(200);
    jQuery(div).show(200);
});
</script>

救命啊!谢谢!

Answer 1

由于您的元素变成了可点击元素而不是可选择元素，因此您可以将 change 函数更改为 click 函数，如下所示:

jQuery("#selector1 li").click(function(){
  var div = jQuery("a", this).attr("value");
  $('.holder').hide(200);
  jQuery(div).show(200);
});