如何使用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');

更新小提琴