javascript - jQuery slideToggle 混淆

Question

我的问题：每个单独的标题部分都会打开一个内容部分。一键展开和折叠所有这些部分。但是，该按钮没有按我想要的方式运行。相反，它会打开所有关闭的部分，如果有任何部分保持打开状态 - 它会关闭它。

代码：

$(".panelStyle").hide();
$("#ExpandAndCollapseButton").click(function () {
    $(".panelStyle").slideToggle("medium");
});
$(".sectionLabels").click(function () {
    $(this).next(".panelStyle").slideToggle("medium");
});

Answer 1

您不想将滑动切换用作“强制全部打开”动画。你想用slideDown()

slideToggle 只会切换当前状态。slideDown 将强制任何未打开的打开，但保留打开的那些。

请在下面查看我的更改。

$(".panelStyle").hide();
$("#ExpandButton").click(function () {
    $(".panelStyle").slideDown("medium");
});
$(".sectionLabels").click(function () {
    $(this).next(".panelStyle").slideToggle("medium");
});

我添加了一些逻辑来切换所有打开/关闭。如果没有一个是打开的，那么所有的都是打开的。如果一个或多个已经打开，则全部关闭。

这是小提琴

http://jsfiddle.net/QwbNj/1/

这是代码。

$("#clickme").click(function () {
    if($(".openme:visible").length == 0){
        $(".openme").slideDown();
    } else {
        $(".openme").slideUp();
    }

});
$(".menuwrapper").click(function () {
    $(this).find(".openme").slideToggle();
});