li nav菜单只会在每次点击时触发我的.toggleClass

时间:2015-04-27 14:34:12

标签: javascript jquery

所以,我有一个<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;没有!

1 个答案:

答案 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演示

&#13;
&#13;
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;
&#13;
&#13;