Question

我正在尝试使用jQuery击败基本的手风琴风格菜单。

这是菜单：

http://www.cybart.com/bscg/

这是一段代码，为其提供手风琴功能：

$('#access ul li').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).children('ul:hidden').slideDown();

    });

问题：点击子菜单链接会使子菜单向上滑动（并关闭）。

我希望在单击子菜单链接时保持子菜单打开，并且仅在单击顶级链接时向上滑动。

如何通过jQuery仅选择顶级ul来为子菜单设置动画？或者有没有办法选择子菜单链接并“告诉它”以保持子菜单点击打开？

我很感激你的智慧！

Answer 1

您似乎需要在CSS中使用>运算符。

.foo > .bar选择类bar的所有元素，这些元素是具有类foo的元素的直接子元素

知道了，工作代码：

$('#access ul.menu > li > a').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).siblings('ul').slideDown();
    });
});

为了防止菜单再次向上滑动，这有效：

$('#access ul.menu > li > a').click(function(){
        var siblingUl = $(this).siblings('ul');
        if(siblingUl.is(':visible')) { // The currently open menu was clicked
            // Remove this if you want nothing to happen
            siblingUl.slideUp();
            return;
        }

        $('#access ul ul:visible').slideUp();
        siblingUl.slideDown();
    });
});

Answer 2

您无法停止关闭菜单，因为浏览器正在发出新请求并在您点击链接时加载菜单。只需观看网址栏即可。单击子菜单链接时，URL会更改。

您需要向网址添加内容以阻止子菜单折叠，或者测试网址以确定在网页加载后是否应重新打开手风琴。

Answer 3

这更简单，对我有用。

$(".parent").click(function() {
   $(this).children('ul').slideToggle();
});

Answer 4

我花了10分钟阅读并理解您的代码，因为您有很多样式和ID，这使它复杂化，照顾最佳实践

您需要的只是

<ul>
  <li>
   <a class="menu">Menu</a>
    <ul>
       <li><a>Submenu</a></li>
    </ul>
  </li>
  <li>Other menu</li>
</ul>

...

$(document).ready(function(){

  $(".menu").click(function(){
      $(this).next().toggle()
  })

})

jQuery：只选择ul，而不是ul ul

4 个答案: