首先点击手风琴不起作用答案

【问题标题】：first click on accordion not working首先点击手风琴不起作用
【发布时间】：2018-07-16 14:16:02
【问题描述】：

我的手风琴工作不正常。

第一次点击，内容不显示。 . . .

否则，如果您第二次单击它并在它出现之后。 .

任何帮助都会很棒，

这是我的小提琴：

https://jsfiddle.net/ugddnof4/

所有的 thtml 都在那里。

或者下面是我的js：

(函数($){ $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

$('.accordion a').click(function(j) {
    var dropDown = $(this).closest('li').find('ul.accordion-content li, p, ul.accordion-content');

    $(this).closest('.accordion').find('ul.accordion-content li, p, ul.accordion-content').not(dropDown).slideUp();

    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).closest('.accordion').find('a.active').removeClass('active');
        $(this).addClass('active');
    }

    dropDown.stop(false, true).slideToggle();

    j.preventDefault();
});
 })(jQuery);

非常感谢您的所有时间！

【问题讨论】：

它非常适合我
我可以重现它（Chrome 浏览器，如果相关）。想过使用它而不是自己滚动吗？ jqueryui.com/accordion
@kannan 第一次点击内容没有出现...:(
如果您先单击打开的项目，然后从那里单击任何内容，则原件可以正常工作。但是如果你先点击一个关闭的项目，它会关闭打开的项目，并且无法打开点击的项目。

标签： javascript jquery accordion

【解决方案1】：

这似乎有效

https://jsfiddle.net/9erfLokh/1/

新的js：

(function($) {
    $('.accordion > li:eq(0) a').addClass('active').next().slideDown();

    $('.accordion a').click(function(j) {
        var dropDown = $(this).closest('li').find('ul.accordion-content');
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
        } else {
            $(this).closest('.accordion').find('a.active').closest('li').find('ul.accordion-content').slideUp();
            $(this).closest('.accordion').find('a.active').removeClass('active');
            $(this).addClass('active');
        }

        dropDown.stop(false, true).slideToggle();

        j.preventDefault();
    });
})(jQuery);

我认为您的问题主要是 dropDown 返回了一整套 dom 对象，而您在所有这些对象上运行 slideToggle。此版本仅在有一个块处于活动状态时才会关闭一个块，并且始终切换被单击的块，但注意仅在单个元素上运行 slideToggle。

【讨论】：

太棒了！谢谢