- 首页
- 前端开发
- 如果再次单击它的父级，则保持未折叠的元素处于打开状态
如果再次单击它的父级，则保持未折叠的元素处于打开状态
[英] Keeping an uncollapsed element open if it's parent is clicked on again
本文介绍了如果再次单击它的父级，则保持未折叠的元素处于打开状态的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
首先对糟糕的措辞表示歉意，我无法描述这个问题.
目前我在水平行中有一系列按钮，点击一个按钮会显示其下方的相关内容，点击不同的按钮会折叠当前内容并显示新内容(使用data-parent"属性).我希望它起作用，例如，如果单击按钮 3 并显示其内容，然后用户再次单击按钮 3，而不是内容折叠，我希望它保留在屏幕上.它目前的工作方式是，如果显示按钮 3 的内容并再次单击按钮 3，元素将折叠，我们只剩下一行按钮.我已经尝试过 '.collapse("show")' 方法，但我很难实现它(甚至不确定是否可以使用这种方法).这是相关的代码:
<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="面板"><div id="0" class="collapse in">按钮 0 的内容
<div id="1" class="折叠">按钮 1 的内容
<div id="2" class="折叠">按钮 2 的内容
<div id="3" class="折叠">按钮 3 的内容
任何帮助将不胜感激.
解决方案
不知道这个解决方案是否能让你满意，但你可以像那样屏蔽这个
例如
$('.btn').click(function(e) {target = $(this).data('target');if($(target).is(':visible')){返回假；}});
在这种情况下，如果您单击button1"，它将折叠正确的 div，如果您再次单击它，则不会发生任何事情.但是，单击另一个按钮会折叠另一个 div.
First of all apologies for the terrible wording, I'm having trouble describing the issue.
Currently I have a series of buttons in a horizontal row, whereby clicking on a button shows it's associated content underneath, and clicking on a different button collapses the current content and shows the new content (using the 'data-parent' attribute). I want it to function so that for example, if button 3 is clicked and it's content shown, and the user then clicks on button 3 again, instead of the content collapsing I would like it to remain on screen. The way it works currently is that if button 3's content is shown and button 3 is clicked again, the element collapses and we're just left with a row of buttons again. I've experimented with the '.collapse("show")' method but I'm having difficulty implementing it (not even sure if it's possible to work with this method). Here is the associated code:
<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>
Any help would be greatly appreciated.
解决方案
Dont know if this solution will satisfy you but you can block this like that
for example
$('.btn').click(function(e) {
target = $(this).data('target');
if($(target).is(':visible')){
return false;
}
});
In this situation if you click on "button1" it will collapse the correct div and if you click this again nothing will happen. However clicking another button will collapse another div.
这篇关于如果再次单击它的父级，则保持未折叠的元素处于打开状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
