javascript - jQuery Accordion 的简单问题

Question

我有一个简单的 jQuery Accordion ，可以正常工作...几乎 :)

正如您从演示中看到的那样，我目前在“团队”页面中“打开”导航。

是否有可能当我点击“关于我们”时，它会完全关闭该元素。正如您从演示中看到的那样，它关闭了它，但然后迅速重新打开它。我猜这是因为我的 CSS 第 27 行 上的代码造成的。

这是我的演示:http://jsfiddle.net/URYzK/5/

这是我的 JavaScript:

jQuery(function($) {

    $('#accordion > li > a').click(function (e) {
        if ($(this).next('ul').length == 0) {
            // link is for navigation, do not set up accordion here
            return;
        }

        // link is for accordion pane

        //remove all the "Over" class, so that the arrow reset to default
        $('#accordion > li > a').not(this).each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }

            $(this).siblings('ul').slideUp("slow");
        });

        //showhide the selected submenu
        $(this).siblings('ul').slideToggle("slow");

        //addremove Over class, so that the arrow pointing downup
        $(this).toggleClass($(this).attr('rel') + 'Over');
        e.preventDefault();
    });

});

非常感谢您的帮助。

Answer 1

从 #accordian ul 中删除 display:none 并完全删除 .children CSS。我相信这会产生您想要的行为。您将子项 ul 设置为 display:none，然后尝试强制 .children，这是一个 ul，稍后将成为 display:block，这就是他们战斗的原因。

同时更新了您的 jsFiddle。