jquery - jQuery Li选择器

我有这段代码，我需要完成这个脚本：

$(document).ready(function () {
  $('.toggle').hide();
  $('li.togglelink').on('click', function (e) {
      e.preventDefault();
      var elem = $(this).next('.toggle')
      $('.toggle').not(elem).hide();
      elem.toggle();

  });
});

如何为li.togglelink制作选择器？为什么我的剧本不起作用？

<ul id="main" class="horizontal">
  <li class="togglelink">Lorem ipsum
    <ul id="drop" class="toggle vertical">
       <li>První</li>
       <li>Druhý</li>
       <li>První</li>
       <li>Druhý</li>
    </ul>
  </li>
</ul>

另一个重要问题是：如果不是togglelink或toggle悬停，如何隐藏toggle？

最佳答案

您需要使用.find()而不是.next()，因为您正在寻找.togglelink中的类。而且您不需要使用e.peventDefault()（除非您计划添加链接）。你也可以删减剧本：

$('.toggle').hide();
  $('li.togglelink').on('click', function (e) {
  var elem = $(this).find('.toggle').slideToggle();
});

FIDDLE
您也可以在css中将.toggle设置为display: none，而不是在页面加载时调用$('.toggle').hide();：
EVEN LESS CODE

关于jquery - jQuery Li选择器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27650828/