Question

我试图创建在点击时打开子菜单的链接。目前，脚本只打开所有子菜单，而不是分配给该特定链接的子菜单。

HTML

<nav>
    <ul>
        <li>
            <a class="menu">Category A</a>
            <ul class="submenu">
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
            </ul>
        </li>
        <li>
            <a class="menu">Category B</a>
            <ul class="submenu">
                <li><a href="#">Item C</a></li>
                <li><a href="#">Item D</a></li>
            </ul>
        </li>
    </ul>
</nav>

的jQuery

$("nav ul li").click(function() {
    var submenu = $(this).find('.submenu');
    $('.submenu').not(submenu).fadeToggle().removeClass('opened');
    submenu.addClass('opened').fadeToggle();
});

这是我的jsfiddle

如果单击类别A，我希望它仅显示项目A和项目B.（此时它显示所有类别的所有项目）然后，如果单击类别B，我希望它隐藏类别A并仅显示当前打开的类别。

Answer 1

只是这样做：

$(".menu").on('click', function() {
  var submenu = $(this).next('.submenu');
  if($('.thisul').find('.submenu') != $(this)){
      $('.thisul').find('.submenu').fadeOut();
  }
  submenu.fadeToggle();
});

小提琴：http://jsfiddle.net/j44163w9/4/

只需添加课程

<nav>
  <ul class="thisul">...
   ...

Answer 2

修正：检查锚链接的下一个名为.submenu的兄弟，然后将其用作淡出切换菜单的目标。

JQuery的：

$("nav ul li a").click(function() {
    var $submenu = $(this).next(".submenu").not(".opened");
    $(".submenu.opened").fadeOut().removeClass("opened");
    $submenu.fadeIn().addClass("opened");
});

小提琴：http://jsfiddle.net/ov0Lapx4/1/

Answer 3

一种干净的方式，没有动画的竞争条件

HTML

<nav>
    <ul class="container">
        <li>
            <a class="menu">Category A</a>
            <ul class="submenu">
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
            </ul>
        </li>
        <!-- ... -->
    </ul>
</nav>

JS

$(".container .menu").click(function(e) {
    e.preventDefault();

    var $this = $(this);
    var $menu = $this.parent();    
    var $container = $this.closest("ul.container");

    $container.find('ul').removeClass('opened').fadeOut('fast', function() {
        var $submenu = $menu.find('.submenu');
        $submenu.fadeIn('fast').addClass('opened');
    });    
});

Refer to this fiddle

请记住，这可以完全使用CSS而不需要任何javascript

单击fadeToggle子菜单上的jQuery

3 个答案:

JQuery的：

一种干净的方式，没有动画的竞争条件

HTML

JS