我需要检查 Boostrap 折叠手风琴中元素的可见性。
在某些情况下,JQuery Validator 将此元素设置为"display:none",我需要根据其显示设置添加一些进一步的控件 - 因为我在我设置的形式中遇到了奇怪的功能行为,我正在尝试找到不同的方法。
不知不觉中,问题是折叠手风琴中的元素是不可见的,所以我不知道如何控制该属性。
该元素是:
<span id="edit-field-attachments-und-0-upload--2-error" class="error">Campo obbligatorio</span>
所以,如果我尝试使用类似的东西:
$('.panel span.error:visible')
或等效的选择器, 除非打开手风琴,否则我没有得到正确的结果.
知道如何解决这种情况吗?谢谢
你可以试试这个,看看这个元素是否作为内联元素存在于 dom 中。如果你在span标签中添加style="display: none;"进行测试,你应该看到isVisible将返回"none",然后你可以添加逻辑来说明span是内联还是none,等等。
function isVisible(el) {
return window.getComputedStyle(el[0]).display;
}
console.log(isVisible($('#collapse1 .error')));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body"><span id="edit-field-attachments-und-0-upload--2-error" class="error">Campo obbligatorio</span></div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
</div>