javascript - 第一次点击 Accordion 不起作用

Question

我的 Accordion 无法正常工作。

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

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

任何帮助都会很棒，

这是我的 fiddle :

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

非常感谢您的宝贵时间!

Answer 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 。此版本只会在有一个事件 block 时关闭一个 block ，并且始终会切换单击的 block ，但要注意仅在单个元素上运行 slideToggle。