如何使用JQuery进行切换

Question

我有一个手风琴，每次点击都可以打开，但是如何再次将其关闭？

HTML：

<ul class="accordion">
<li id="one" class="files">
        <a href="#one">Calendar 1<span>10</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>
        </ul>
    </li>
<li id="two" class="mail">
        <a href="#two">Calendar 2<span>20</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>
        </ul>
    </li>
<li id="three" class="cloud">
        <a href="#three">Calendar 3<span>30</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>
        </ul>
    </li>
<li id="four" class="sign">
        <a href="#four">Calendar 4</a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu</a></li>
        </ul>
    </li>
</ul>

Javascript：

$(document).ready(function() {
  // Store variables
  var accordion_head = $('.accordion > li > a'),
      accordion_body = $('.accordion li > .sub-menu');

  // Open the first tab on load
  accordion_head.first().addClass('active').next().slideDown('normal');

  // Click function
  accordion_head.on('click', function(event) {
    // Disable header links
    event.preventDefault();

    // Show and hide the tabs on click
    if ($(this).attr('class') != 'active') {
      $(this).next().stop(true,true).slideToggle('normal');
      $(this).addClass('active');
    }
  });
});

小提琴： http : //jsfiddle.net/fuuLh494/

Answer 1

您不需要显式检查活动类的发生，然后执行添加/删除类的决定。 您可以使用toggleClass实现此目的：

accordion_head.on('click', function(event) {
 event.preventDefault();
  $('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
  $(this).next().stop(true,true).slideToggle('normal');
  $(this).toggleClass('active');
});

工作演示

Answer 2

    if ($(this).attr('class') != 'active'){
        //accordion_body.slideUp('normal');
        $(this).next().stop(true,true).slideToggle('normal');
       //accordion_head.removeClass('active');
        $(this).addClass('active');
    } else {
        $(this).next().stop(true,true).slideToggle('normal');
        $(this).removeClass('active');
    }

请在此处查看更新的小提琴： http : //jsfiddle.net/9ev31v6w/

Answer 3

学习指南所能做的最好的事情就是学习，在没有阅读代码的情况下不要复制和粘贴。 就这么简单：

http://jsfiddle.net/fuuLh494/1/

我在脚本末尾添加了else语句：

      else {
            $(this).next().stop(true,true).slideToggle('normal');
            $(this).removeClass('active');
        }

Answer 4

用toggleClass替换所有addClass实例，并删除class是否处于活动状态的条件。

当我们已经使用toggleClass()添加了类并且不需要任何if条件块时，我们正在尝试删除该类。

accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed

工作JSfiddle

Answer 5

您可以完全删除if ，并同时使用slideToggle和toggleClass ：

$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');

更新小提琴