Question

因此，当我点击父<li>时，我正试图向下滑动子菜单的<ul>，但由于某种原因，当我点击<ul>时没有任何反应。我目前正在使用此代码：

HTML：

<div class="mobile-home-second-menu clearfix">
    <ul class="home-second-menu clearfix">
        <li class="first-menu-item">
            <a href="#">Main category</a>
            <ul class="submenu">
                <li class="second-menu-item">
                    <a href="#">Subcategory</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

JS：

$('ul.home-second-menu').click(function() {
    $(this).next('li').slideDown('normal');
});

CSS：

ul.submenu{ display:none; }
*Rest of the CSS is irrelevant*

由于某种原因，.next()电话无效。当我删除.next并将slideDown()更改为addClass()时，它可以正常工作（它会向ul.home-second-menu添加一个类，就像它应该的那样）。我一直在看这个问题太久了，这可能是一个简单的错误，但任何帮助都会受到赞赏！

Answer 1

隐藏的内容是ul，而不是您要刊登的li

Answer 2

这不起作用，因为您没有点击.next()的{{1}}兄弟项目。

相反，您应该在列表项上绑定ul.home-second-menu事件：

＆＃13;

click

＆＃13;

    $('ul.home-second-menu li').click(function(e) {
      e.preventDefault();
      if ($(this).siblings('li').find('ul.submenu:visible').length) {
        $('ul.submenu').slideUp('normal');
      }
      $(this).find('ul.submenu').slideToggle('normal'); // show the respective one.
    });

＆＃13;

.submenu {
  display: none;
}

＆＃13;

Answer 3

请尝试以下解决方案 -

＆＃13;

$('ul.home-second-menu>li>a').click(function(){
    $(this).next('ul').slideDown();
});

＆＃13;

ul.submenu{display:none;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobile-home-second-menu clearfix">
    <ul class="home-second-menu clearfix">
        <li class="first-menu-item">
            <a href="#">Main category</a>
            <ul class="submenu">
                <li class="second-menu-item">
                    <a href="#">Subcategory</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

＆＃13;

Answer 4

当你尝试动画隐藏的东西或者在完成动画制作之前没有设置高度的东西jQuery不会知道如何动画它。

您还应该使用slideToggle并将时间参数传递给它。不要使用next，而是使用children。

＆＃13;

$('.menu').click(function(event) {
	$(this).children('li').slideToggle('fast');
});

＆＃13;

.menu li {
  display: none;
  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="menu">
  Hey, click at me
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

＆＃13;

向下滑动当前<ul>的<li>

4 个答案: