Question

我正在使用jQuery处理一个带有切换状态的简单手风琴。到目前为止一切都那么好，但是当我点击一个不同的切换点而不是我在开始时点击的初始切换点时，它会自动切换，使前一个切换点处于打开状态。

如何进行某种检查以确定是否有其他人打开并切换其状态？

这是一个Fiddle.只是乱七八糟，你会理解我的意思。

// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {

  // State change visuals
  $(this).toggleClass('opened');

  //Expand or collapse this panel
 $(this).next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

});

Answer 1

正如我在上面的评论中所述，这是一个工作小提琴。

问题在于，当你打开一个手风琴项目时，没有其他打开的允许，这意味着你必须清除每个代表开放状态的类......

Working Fiddle

// Accordion init
// Hide accordion content on load
$('.accordion-content').hide();
$('.widget-accordion').find('.accordion-toggle').click(function() {
    $('.accordion-toggle').not(this).each(function(){
    $(this).removeClass("opened");
  });
  // State change visuals
  $(this).toggleClass('opened');

  //Expand or collapse this panel
  $(this).next().slideToggle('fast');

  //Hide the other panels
  $(".accordion-content").not($(this).next()).slideUp('fast');

});

Answer 2

使用此代替toggleClass：

// State change visuals
 $('.accordion-toggle').removeClass('opened');
 $(this).addClass('opened');

小提琴：https://jsfiddle.net/cndnnww5/5/

简单的jQuery手风琴切换

2 个答案: