2

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

我有一系列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 个主导航项目时，它们相应的子菜单使用左边距进行动画处理。

我目前正在使用 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()工作并驱动动画。

任何想法/建议/解决方案将不胜感激。

（编辑拼写错误）。

谢谢，

4

2 回答 2

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/

于 2012-10-03T09:10:47.950 回答
0

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

这对我有用：

$('.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');
        }
    }
});
于 2012-10-01T22:40:10.083 回答