1

我试图击败一个基本的手风琴风格菜单提交 - 使用 jQuery。

这是菜单：

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

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

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

    });

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

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

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

我会很感激你的智慧！

4

4 回答 4

4

看来您需要>在 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();
    });
});
于 2011-07-09T04:53:44.760 回答
0

这更简单，对我有用。

$(".parent").click(function() {
   $(this).children('ul').slideToggle();
});
于 2014-03-17T09:19:07.323 回答
0

您无法阻止菜单关闭，因为当您单击链接时，浏览器正在发出新请求并重新加载菜单。只看网址栏。当您单击子菜单链接时，URL 会发生变化。

您需要在 URL 中添加一些内容以阻止子菜单折叠，或者测试 URL 以查看它是否应该在页面加载后重新打开手风琴。

于 2011-07-10T06:13:04.397 回答
-1

我花了 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()
  })

})
于 2011-07-09T05:06:28.743 回答