Bootstrap multiselect работает только при первом использовании - PullRequest
0 голосов
/ 12 февраля 2019

Я использую 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 продолжают срабатывать.

...