所以,我有一个<ul> <li>
jQuery Nav。通常的类型。 (标记明智)。
以下是为它供电的jQuery ..问题是..我的.toggleClass
只读取第一次点击和第三次点击(所以每次其他点击)。因此,第二次单击时不会附加类。但是,如果用户点击关闭按钮并且该代码触发,它在每次点击时都能正常工作..但如果用户没有“关闭”并决定直接转到其他导航项目(更常见的情况) 。每一次点击;一切都坏了,因为这一行没有附上 vv
$('section.educator-guide').toggleClass('toggle-margin'); // only attaches every other click
以下是所有相关的jQuery。
$('.mainseries li').filter(':parent').click(
function(e){
//e.preventDefault();
$('.serieDetails').hide();
$('.mainseries li').removeClass('activeSerie');
$('.series').css('height','inherit');
$('section.educator-guide').toggleClass('toggle-margin'); // this
var element = $(this).find('.serieDetails');
element.fadeIn();
$('.series').height($('.series').height()+element.height());
$(this).addClass('activeSerie');
// $(this).toggleClass('toggle-margin');
$('html,body').animate({
scrollTop: $('.series').offset().top+element.height()} ,
'slow' ,
function(){
//element.show();
//$(this).find('.serieDetails').show();
});
});
$('.btnClose').click(function(e){
$('.mainseries li').removeClass('activeSerie');
$('section.educator-guide').removeClass('toggle-margin');
$('.serieDetails').slideUp("slow",function(){ $('.series').css('height','inherit'); $('.serieDetails').hide(); run=true;});
return false;
});
我已经尝试过每一种重新排列的方式 - 我已经尝试.removeClass
作为主<li>
点击功能顶部的关闭按钮,仍然无法正常工作。我试过添加return false;
没有!
答案 0 :(得分:2)
toggleClass,顾名思义,打开或关闭课程。
描述:在每个元素中添加或删除一个或多个类 匹配元素的集合,取决于类的存在 或者是state参数的值。
例如,如果你有
<a class="someClass"></a>
并致电
$("a").toggleClass("someClass");
//resulting in <a class=""></a>
someClass将被删除。
再次调用toggleClass并将其添加回来。
$("a").toggleClass("someClass");
//resulting in <a class="someClass"></a>
如果您每次都需要添加一个类,只需使用addClass方法。
当然你也可以在close函数内部以及open函数中使用toggleClass,即:
$('.btnClose').click(function(e){
...
$('section.educator-guide').toggleClass('toggle-margin');
...
});
这会在您关闭时关闭课程,然后在您打开时将其重新打开。但是这有一个缺点,即在某些时候,班级的状态可能会变得落后,即按下关闭会切换班级,打开将会切换班级。所以在这种特殊情况下我会使用addClass和removeClass
toggleClass演示
jQuery("div").click(function(){
jQuery(this).toggleClass("toggled");
})
&#13;
div {
background:#000;
color:white;
cursor:pointer;
}
.toggled {
background:#FFF;
color:black;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="">Click me to toggle class on and off</div>
&#13;