Jquery: Wie überprüfe ich, ob ein Element in einem Boostrap-Akkordeon sichtbar ist?

Question

Ich muss die Sichtbarkeit eines Elements innerhalb eines Boostrap-Akkordeons überprüfen.

Dieses Element wird unter bestimmten Umständen von JQuery Validator auf "display: none" gesetzt, und ich muss abhängig von seinen Anzeigeeinstellungen einige weitere Steuerelemente hinzufügen - da ich ein seltsames Verhalten mit seiner Funktionalität im Formular I festgestellt habe habe festgelegt und ich versuche einen anderen Ansatz zu finden.

Offensichtlich ist das Problem, dass Elemente in einem zusammengebrochenen Akkordeon nicht sichtbar sind, also weiß ich nicht, wie diese Eigenschaft kontrolliert wird.

Das Element ist:

<span id="edit-field-attachments-und-0-upload--2-error" class="error">Campo obbligatorio</span> 

Also, wenn ich so etwas wie zu verwenden versuchen:

$('.panel span.error:visible') 

oder gleichwertigen Selektoren, ich habe nicht ein korrektes Ergebnis erhalten, wenn das Akkordeon geöffnet wird.

Irgendeine Idee, wie diese Situation löst? Danke

Answer 1

Sie könnten dies versuchen, um zu sehen, ob das Element in der Dom als Inline-Element existiert. Wenn Sie style = "display: none;" mit dem Span-Tag zu testen, sollten Sie die isVisible zurückkehren wird „keine“ sehen, dass, die Sie dann Logik hinzufügen können, zu sagen, wenn die Spanne inline oder keiner ist, etc ..

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>