jQuery .toggle 问题

Question

我的第一个问题在这里，所以我会尽量简洁。

我有一系列nav 元素，其中一些有nav 子元素。我的基本结构是：

    <nav role="navigation" class="primary-nav main-nav">
        <ul>
            <li><a href="index.php">home</a></li>
            <li class="about-item"><a href="#">about</a></li>
            <li class="study-item"><a href="#">study</a></li>
            <li class="apply-item"><a href="#">apply</a></li>
            <li><a href="people.php">people</a></li>
            <li><a href="shows.php">shows</a></li>
            <li><a href="contact.php">contact</a></li>
        </ul>
    </nav>

    <!-- secondary navs -->
    <!-- about -->
    <nav role="navigation" class="sec-nav sec-nav-about">
        <ul>
            <li><a href="history.php">history</a></li>
            <li><a href="facility.php">facility</a></li>
            <li><a href="alumni.php">alumni</a></li>
            <li><a href="friends.php">friends</a></li>
            <li><a href="patrons.php">patrons</a></li>
            <li><a href="singers.php">singers</a></li>
        </ul>
    </nav>

    <!-- study -->
    <nav role="navigation" class="sec-nav sec-nav-study">
        <ul>
            <li><a href="foundation.php">foundation</a></li>
            <li class="study-undergrad-item"><a href="#">undergrad</a></li>
            <li class="study-postgrad-item"><a href="#">postgrad</a></li>
            <li><a href="parttime.php">part time</a></li>
            <li><a href="exams.php">exams</a></li>
            <li><a href="saturdayschool.php">saturday school</a></li>
            <li><a href="sundayschool.php">sunday school</a></li>
            <li><a href="summerschool.php">summer school</a></li>
        </ul>
    </nav>
<!-- apply -->
<nav role="navigation" class="sec-nav sec-nav-apply">
    <ul>
        <li><a href="loans.php">loans</a></li>
        <li><a href="auditions.php">auditions</a></li>
        <li><a href="fees.php">fees</a></li>
        <li><a href="exams.php">exams</a></li>
        <li><a href="saturdayschool.php">saturday school</a></li>
        <li><a href="sundayschool.php">sunday school</a></li>
        <li><a href="summerschool.php">summer school</a></li>
    </ul>
</nav>

（我知道这些列表可以——也应该——嵌套，但这是我继承的代码，而不是我自己编写的代码，我不想搞砸样式中可能存在的任何其他内容）。

所以 - 我想要的是当点击第 3、4 和第 5 个主导航项时，它们对应的子菜单使用 margin-left 进行动画处理。

我目前正在使用 jQuery .toggle() 来尝试实现这个效果。这是我的 jQuery：

$(document).ready(function(){
  $('.main-nav .about-item a').toggle (
    function(){
      $('.sec-nav-about').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-about').animate({marginLeft: "-250"}, 500);
    });

  $('.main-nav .study-item a').toggle (
    function(){
      $('.sec-nav-study').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-study').animate({marginLeft: "-250"}, 500);
    });
  $('.main-nav .apply-item a').toggle (
    function(){
      $('.sec-nav-apply').animate({marginLeft: "480"}, 500);
    },
    function(){
      $('.sec-nav-apply').animate({marginLeft: "-250"}, 500);
    });
  });

到目前为止，一切都很好。但是，我无法超越这一点。我不知道如何重新编写代码以实现以下目标：

1) 当每个主菜单项被点击时，如果它有一个子菜单并且如果它还没有显示，那么子菜单就会动画出来（这工作正常）。

2) 如果一个子菜单已经显示，那么当它的主菜单项被点击时，子菜单会重新进入动画直到它不显示（这也是有效的）。

3) 如果一个子菜单正在显示并且另一个子菜单项被点击，第一个子菜单动画会重新进入，直到它不显示并且新的子菜单项菜单动画出来。这不工作。

我尝试像这样在每个子菜单中添加/删除.active 类（此处仅提供一个用于说明目的，但所有三个子菜单都适用于它们）：

$('.main-nav .about-item a').toggle (
  function(){
    $('.active').animate({marginLeft: "-250"}, 500).removeClass('active');
    $('.sec-nav-about').animate({marginLeft: "480"}, 500).addClass('active');
  },
  function(){
    $('.sec-nav-about').animate({marginLeft: "-250"}, 500).removeClass('active');
  });
});

然后发生的事情是，它似乎工作了一段时间，然后停止删除/添加 .active 类。我仔细检查了 Chrome 的元素检查器，可以看到它（没有）发生。我需要点击链接两次，才能让toggle() 工作并驱动动画。

非常感谢任何想法/建议/解决方案。

（针对拼写错误进行了编辑）。

谢谢，

Answer 1

Will Moore 的回答解释了为什么您当前的方法不起作用。以下应该可以解决您的问题。在 className 属性上使用正则表达式意味着我们可以将其应用于列表中的所有项目，而无需单独设置每个项目。

另外，请注意，在将.active 类添加到当前选定的子菜单之前，我们会查询“要隐藏的子菜单”；这样可以避免我们一显示就隐藏它。

$('.main-nav li').click(function() {
    var itemType = this.className.match(/(^| )([^ ]+)-item( |$)/);
    if(itemType != null) {
        itemType = itemType[2];
    }

    $secNavItem = $('.sec-nav-' + itemType);
    $subMenusToHide = $('.active');
    if(!$secNavItem.hasClass('active')) {
        $secNavItem
            .addClass('active')
            .animate({marginLeft: "480"}, 500);
    }

    $subMenusToHide
        .animate({marginLeft: "-250"}, 500)
        .removeClass('active');
});

你可以看到它在这个小提琴中工作：http://jsfiddle.net/ET475/23/

Answer 2

当您点击“研究”时，它会显示研究子菜单。 然后单击“关于”，它会隐藏研究菜单（显示关于菜单）。 现在您再次单击“学习”。这只是第二次点击研究按钮，所以它会做与上次点击相反的操作：即当您希望它显示研究菜单时，它会隐藏研究子菜单。

这对我有用：

$('.main-nav .about-item a').click (function(){
    var $submenu = $('.sec-nav-about');
    // if the submenu you want isn't showing...
    if (!$submenu.hasClass('active')) {
        // if any other submenu is showing, hide it...
        if ($('.active').length > 0){
            $('.active').animate({marginLeft: "-250"}, 500, function(){
             // ...show submenu AFTER previous submenu is hidden
             $submenu.animate({marginLeft: "480"}, 500).addClass('active');
            }).removeClass('active');
        } else {
            // no submenus showing: simply display
            $submenu.animate({marginLeft: "480"}, 500).addClass('active');
        }
    }
});