简单的jQuery手风琴切换

我正在使用jQuery切换状态的简单手风琴。到目前为止这么好，但是当我点击一个不同的开关时，我在开始时点击了它，它会自己切换，并保持前一个开启状态。简单的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'); 

});

来源

2016-11-08 snkv

打开时，您必须清除所有公开课（从每个没有实际点击过的手风琴项目开始），这就是它 – TeaTime

您还可以提供一些代码指导吗？ – snkv

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

的问题是，当你打开一个手风琴项目没有其他不允许打开，这意味着你要清楚每它代表身份公开课...

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'); 

});

来源

2016-11-08 14:42:16 TeaTime

我可以总结一下你的答案，我会的，如果你不想要，就告诉我。 – Tinsten

@Spykee--意思是你有更好的解决方案？ – snkv

对不起，没关系我不会总结它，只是请修理你的小提琴。 – Tinsten

使用这种替代toggleClass：

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

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

来源

2016-11-08 14:45:07

小提琴更新，检查这一个。还有更多的方法。 –

简单的jQuery手风琴切换

回答

相关问题