javascript - li 导航菜单仅每隔一次单击触发我的 .toggleClass

Question

所以，我有一个<ul> <li> jQuery 导航。通常的类型。 (明智的标记)。

下面是为其提供动力的 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;什么都没有!

Answer 1

toggleClass顾名思义，打开或关闭一个类。

Description: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.

例如，如果您有

<a class="someClass"></a>

并调用

$("a").toggleClass("someClass");
//resulting in <a class=""></a>

someClass 将被删除。

再次调用toggleClass，它会将其添加回来。

$("a").toggleClass("someClass");
//resulting in <a class="someClass"></a>

如果您需要每次添加一个类，只需使用 addClass方法。

<小时/>

当然，您也可以在关闭函数以及打开函数中使用toggleClass，即:

$('.btnClose').click(function(e){
    ...
    $('section.educator-guide').toggleClass('toggle-margin');
    ...
});

这会在您关闭时关闭该类，然后在您打开时将其重新打开。但这有一个缺点，即在某些时候类的状态可能会变得向后，即点击关闭将打开该类，点击打开将关闭该类。所以在这种特殊情况下我会使用 addClass 和 removeClass

切换类演示

jQuery("div").click(function(){
   jQuery(this).toggleClass("toggled");  
})

div {
  background:#000;
  color:white;
  cursor:pointer;
}
.toggled {
  background:#FFF;
  color:black;
}

<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>