Question

我已经获得了此代码，我需要开始使用此脚本：

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

另一个重要的事情：如果isnt togglelink或切换悬停，如何隐藏切换？

Answer 1

您需要使用.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

Answer 2

小心你的标记，通常你会在<li>元素中使用一个链接，或者你必须通过CSS自定义光标。我就是这样做的：

HTML

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

Jquery的

$('.toggle').hide();

$(function() {
  $('#togglelink>a').click(function(e) {
    $(this).find('.toggle').slideToggle();
    return false;
  });
});

Answer 3

这是因为.next()选择“兄弟姐妹”，而您正在尝试选择一个“孩子”，您需要children()，或者更普遍.find()：

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

  });
});

在这种情况下，它会切换.togglelink的所有子项，但具有类<ul>的{{1}}元素除外。我不确定这是否是理想的结果，但至少使用toggle代替.find()执行某些操作可能会修复它。

Answer 4

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
How can I make selector for li.togglelink? Why my script not works?

    <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>

</li>
</ul>

＆＃13;

Jquery li选择器

4 个答案:

HTML

Jquery的