Question

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

Answer 1

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;

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;

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

1 个答案: