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的Element Inspector中进行了双重检查，可以看到（不）发生。我需要点击链接两次才能让toggle()工作并开动动画。

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

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

谢谢，

Answer 1

摩尔的回答将解释为什么你当前的方法不起作用。以下应该可以解决您的问题。在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');
        }
    }
});

jQuery .toggle很难

2 个答案: