jQuery .toggle灾难
我的第一个问题在这里，所以我会尽量简明扼要。
我有一系列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>(我知道这些列表可以而且应该是嵌套的，但这是我继承的代码，而不是我自己编写的，我不想破坏样式中的任何东西)。
所以-我想要的是当第三，第四和第五主导航项目被点击，他们相应的子菜单动画使用边距-左。
我目前正在使用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()工作和驱动动画。
任何想法/建议/解决方案都将不胜感激。
(因拼写错误而编辑)。
谢谢,
回答 2
Stack Overflow用户
发布于 2012-10-03 09:10:47
威尔摩尔的回答解释了为什么你目前的方法不起作用。下面这些应该可以解决你的问题。使用className属性上的regex意味着我们可以将其应用于列表中的所有项，而不必单独设置每个项。
另外，请注意，在将.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/
Stack Overflow用户
发布于 2012-10-01 22:40:10
当您单击“学习”时，它将显示学习子菜单。然后单击“about”，它会隐藏学习菜单(显示“关于”菜单)。现在你又点击“学习”。这只是对学习按钮的第二次点击，所以它将做与你上次点击它相反的事情:即当你想要它显示学习菜单时，它会隐藏学习子菜单。
这对我来说很管用：
$('.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');
}
}
});https://stackoverflow.com/questions/12678905
复制相似问题
腾讯云开发者
