Question

我创建了一个手风琴菜单，问题是我在li上使用.next但是div不是slideToggle。我希望这次能像手风琴菜单一样。

当我点击“亲李”时，想要打开div，
当我点击另一个时，它的div会滑动，但其他li div应该关闭。

以下是演示链接：http://jsfiddle.net/H4ueq/。请帮帮我。

Answer 1

您可以使用 children（“div”）而不是 next（），因为它是点击的 li 元素的子元素你想滑动切换。使用 slideUp 和 slideDown 而不是切换，这将产生手风琴功能。

见这里：

$("ul#accordian>li").click(function() {
    $("#accordian").find("div[class=details]").slideUp("slow");
    $(this).children("div[class=details]").slideDown("slow");
});

Answer 2

以下是手风琴菜单的示例：http://jsfiddle.net/x7SE4/2/

Answer 3

我从net使用的另一个很酷的简单jquery手风琴使用下面的代码：

$(function() {
    $("#accordion > li").click(function() {
        if (false == $(this).next().is(':visible')) {
            $('#accordion > div').slideUp(300);
        }
        $(this).next().slideToggle(300);
    });
    $('#accordion > div:eq(0)').show(); //change it to hide() to hide the first tab on load
});

我根据你的需要调整了一点css。抱歉回复晚了。我正在寻找这样的代码。以下是示例：http://jsfiddle.net/ravimallya/H4ueq/5/

手风琴菜单使用jQuery

3 个答案: