Question

我正在使用这个手风琴代码

$(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();

});

我注意到有时需要点击两次才能展开它。

这是有效的JFIDDLE example 您可以点击从上到下的所有项目进行测试，之后尝试从下往上点击 - ＆gt;项目需要双击才能工作。

任何想法/解决方案如何解决这个问题？

Answer 1

您需要将滑动值设置为false

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

DEMO

Answer 2

单击元素时，您将在向上滑动时设置数据属性，但是当元素因单击其他元素而关闭时，您不会更改数据。然后您的状况评估为真，并将已隐藏的手风琴向上滑动。

在else语句中更改数据atrribute：

$(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');
            $('div.accordionButton').data("slided", false); //Here
            $(this).next().slideDown('normal');
            $(this).data("slided", true);
        }
    });

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

});

http://jsfiddle.net/9RKkC/3/

Answer 3

从display: none;：

中删除.accordionContent

.accordionContent { 
    width: 800px;
    float: left;
    background: #95B1CE;
}

或者另一个尝试是逻辑，只是一个简单的改变：

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

手风琴 - 有时需要双击项目

3 个答案: