Question

我有一个jQuery手风琴脚本，可以按照我的意愿运行。

但是，理想情况下如果要关闭已打开的内容，则应该在第二次单击时进行。

Like bootstrap accordion here.而且我没有使用它，因为我的菜单是动态的，只有一个'ID'（如果你想知道为什么我不使用它）。

但是，我的脚本没有关闭打开的内容，如上例所示。

有什么建议让它像bootstrap手风琴一样顺畅吗？

我的HTML：

 <div id="wrapper">
    <div class="accordionButton">monday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
    <div class="accordionButton">tuesday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div>
    <div class="accordionButton">wednesday</div>
    <div class="accordionContent">sunny<br />more weather</div>
    <div class="accordionButton">thursday</div>
    <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
</div>

使用Javascript：

 $(document).ready(function() {

//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').slideUp('normal');    
    $(this).next().slideDown('normal');
});

//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

 });

任何帮助都将不胜感激。

Answer 1

您可以尝试仅在隐藏

时展开

     if(!$(this).next().is(':visible'))
    {
        $(this).next().slideDown('normal');
    }

尝试here

Answer 2

我改变了附加的小提琴检查.. JSFiddle

我改变了脚本如下。

$('div.accordionButton').click(function() {
    if($(this).hasClass("expanded")){
    $(this).next().slideUp('normal');
        $(this).removeClass('expanded');
    }
    else{
    $(this).addClass("expanded");
    //$('div.accordionContent').slideUp('normal');  
    $(this).next().slideDown('normal');
    }
});

//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

}）;

Answer 3

试试这个，它将为您提供全部展开/折叠所有功能。

网址 http://accordion-cd.blogspot.com/

Answer 4

这是我能想到的最轻的版本：

$(document).ready(function() {
$('.accordionButton').click(function(){
    $('.accordionContent').slideUp(300);
    if(!$(this).next('.accordionContent').is(':visible')) {                  
        $(this).next('.accordionContent').slideDown(300);
    }
}); });

Answer 5

这将有效

$(document).ready(function() {

//ACCORDION BUTTON ACTION   
$('div.accordionButton').click(function() {
    $('div.accordionContent').removeClass('active').addClass('inactive');      
    $(this).next().removeClass('inactive').addClass('active').slideDown('normal');
    $('div.inactive').slideUp('normal');

}); 
//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();

});

这里是小提琴jsfiddle.net/wTLLP/

Answer 6

添加了数据属性以检查条件。

$(document).ready(function() {

    //ACCORDION BUTTON ACTION   
    $('div.accordionButton').click(function() {
        if($(this).data("slided") === true) {
            $(this).next().slideUp('normal');
            $(this).data("slided", false);
        } else {
            $('div.accordionContent').slideUp('normal');    
            $(this).next().slideDown('normal');
            $(this).data("slided", true);
        }
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});

演示 - JSFIDDLE

jquery手风琴内容不会隐藏在第二次点击

6 个答案: