javascript - 如果再次单击父元素，则保持未折叠的元素打开

Question

首先对糟糕的措辞表示歉意，我无法描述问题。

目前我在水平行中有一系列按钮，点击一个按钮会显示它下面的相关内容，点击另一个按钮会折叠当前内容并显示新内容(使用'data-parent'属性).我希望它起作用，例如，如果单击按钮 3 并显示它的内容，然后用户再次单击按钮 3，而不是内容折叠，我希望它保留在屏幕上。目前它的工作方式是，如果显示按钮 3 的内容并再次单击按钮 3，则该元素会折叠，我们只剩下一行按钮。我已经尝试过 '.collapse("show")' 方法，但我很难实现它(甚至不确定是否可以使用此方法)。这是相关的代码:

<div class ="container" id="content">

    <button class="btn btn-info" data-toggle="collapse" data-target="#0" data-parent="#content">0</button>
    <button class="btn btn-info1" data-toggle="collapse" data-target="#1" data-parent="#content">1</button>
    <button class="btn btn-info2" data-toggle="collapse" data-target="#2" data-parent="#content">2</button>
    <button class="btn btn-info3" data-toggle="collapse" data-target="#3" data-parent="#content">3</button>

    <div class="panel">
        <div id="0" class="collapse in">
            Button 0's content
        </div>

        <div id="1" class="collapse">
            Button 1's content    
        </div>

        <div id="2" class="collapse">
            Button 2's content    
        </div>

        <div id="3" class="collapse">
            Button 3's content    
        </div>
    </div>
</div>

如有任何帮助，我们将不胜感激。

Answer 1

不知道这个解决方案是否会让你满意，但你可以像那样阻止它

例如

$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
    return false;
}
});

在这种情况下，如果您单击“button1”，它将折叠正确的 div，如果您再次单击它，则不会发生任何事情。但是，单击另一个按钮将折叠另一个 div。