Jquery: как проверить, виден ли элемент внутри свернутого аккордеона Boostrap

Мне нужно проверить видимость элемента внутри свернутого аккордеона Boostrap.

Этот элемент установлен в «display: none» при определенных обстоятельствах с помощью JQuery Validator, и мне нужно добавить некоторые дополнительные элементы управления в зависимости от его настроек отображения, поскольку я столкнулся со странным поведением с его функциональностью в форме, которую я установил и Я пытаюсь найти другой подход.

Незаметно проблема в том, что элементы внутри свернутого аккордеона не видны, поэтому я не знаю, как управлять этим свойством.

Элемент:

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

Итак, если я попытаюсь использовать что-то вроде:

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

или эквивалентные селекторы, я не получаю правильного результата, если аккордеон не открыт.

Любая идея, как решить эту ситуацию? Спасибо


jquery twitter-bootstrap bootstrap-accordion
person Giuseppe    schedule 19.06.2017    source источник
comment
попробуй это $('.panel span.error').is(':visible')   -  person Pankaj Makwana    schedule 19.06.2017
comment
Спасибо, но это тоже не работает, когда пролет находится внутри свернутого аккордеона.   -  person Giuseppe    schedule 20.06.2017

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете попробовать это, чтобы увидеть, существует ли элемент в dom как встроенный элемент. Если вы добавите style="display: none;" к тегу span для тестирования, вы должны увидеть, что isVisible вернет «none», что вы можете затем добавить логику, чтобы сказать, является ли span встроенным или нет, и т. д..

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>

person Woodrow    schedule 19.06.2017
comment
Спасибо, я исходил из вашей идеи получить аналог в Jquery (для согласованности с существующим кодом). С function isVisible() { $('.preventivo-step').each(function () { if ($(this).find('span.error').css('display') == 'inline-block') { $(this).addClass("error"); } }); } я получил то, что мне было нужно! - person Giuseppe; 20.06.2017