Я использую Bootstrap v3.0.0
Сгенерированная разметка элемента управления множественного выбора состоит из <select>
и <div>
, содержащих <button>
и <ul>
.
* * * * * * * * * * * * * * * * * * * <ul>
, кажется, является тем, что фактически отображается пользователю.У меня проблема в том, что все работает нормально в первый раз, когда пользователь взаимодействует с элементом управления, но после того, как элемент управления открыт, независимо от того, был ли сделан какой-либо выбор, после закрытия элемента управления его нельзя будет открыть, если только вы не откроете его.обновите страницу.
Я посмотрел на разметку, которую генерирует элемент управления, и заметил, что до взаимодействия элемента с <ul>
выглядит следующим образом:
<ul class="multiselect-container dropdown-menu" style="max-height: 800px; overflow: hidden auto;">
<li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Select all</label></a></li>
<li><a tabindex="0"><label class="checkbox" title="Active"><input type="checkbox" value="A"> Active</label></a></li>
<li><a tabindex="0"><label class="checkbox" title="Disability"><input type="checkbox" value="D"> Disability</label></a></li>
<li><a tabindex="0"><label class="checkbox" title="Pending"><input type="checkbox" value="P"> Pending</label></a></li>
<li><a tabindex="0"><label class="checkbox" title="Terminated"><input type="checkbox" value="T"> Terminated</label></a></li>
</ul>
Но однаждыс элементом управления взаимодействовали, независимо от того, был ли сделан выбор, разметка изменяется на:
<ul class="multiselect-container dropdown-menu" style="max-height: 800px; overflow: hidden auto; display: none;">
<li class="multiselect-item multiselect-all active"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Select all</label></a></li>
<li class="active"><a tabindex="0"><label class="checkbox" title="Active"><input type="checkbox" value="A"> Active</label></a></li>
<li class="active"><a tabindex="0"><label class="checkbox" title="Disability"><input type="checkbox" value="D"> Disability</label></a></li>
<li class="active"><a tabindex="0"><label class="checkbox" title="Pending"><input type="checkbox" value="P"> Pending</label></a></li>
<li class="active"><a tabindex="0"><label class="checkbox" title="Terminated"><input type="checkbox" value="T"> Terminated</label></a></li>
</ul>
display: none;
добавляется к атрибуту стиля <ul>
.Я не уверен, откуда это.Ни один из моих javascript не касается созданной разметки.Если я использую консоль dev в chrome для удаления атрибута display: none;
, элемент управления снова работает для одного взаимодействия, прежде чем он добавляет display: none;
обратно к <ul>
, в результате чего элемент управления больше не открывается.
multiselect по-прежнему ведет себя так, как будто все работает, при этом события onDropdownShown
и onDropdownHidden
продолжают срабатывать.