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。

如果再次单击它的父级，则保持未折叠元素处于打开状态

1 个答案: