Semantic UI Dropdown не показывает раскрывающийся список, но все остальное работает

Я использую раскрывающийся список Semantic UI в своем приложении веб-форм ASP.NET. Он отлично работает в этой скрипте. Но в моем приложении не отображается раскрывающийся список при нажатии на селектор div. Кроме того, я могу выбрать элементы путем поиска, но и в этом случае раскрывающийся список не отображается. Когда я проверил с помощью Firefox, я обнаружил, что свойство display: none не меняется для класса .menu. Когда я исследовал SO, я обнаружил следующие связанные вопросы: Раскрывающийся список Semantic-ui не работает и выпадающее меню семантического пользовательского интерфейса не работает. Я пробовал решения, но ни одно из них не работает. Я проверил другие css в моем проекте, ни один из них не конфликтует. Тогда что в этом плохого? Вы можете найти мой выпадающий код в скрипке.


javascript html jquery css semantic-ui
person Aishwarya Shiva    schedule 30.05.2015    source источник
comment
Длинный выстрел, но, может быть, ваш класс .menu в файлах CSS имеет свойство display:none !important;?   -  person Slavenko Miljic    schedule 31.05.2015
comment
@SlavenkoMiljic на самом деле я использую оригинальный CSS, и в нем нет !important. Кроме того, я пытался использовать его, но никакого эффекта.   -  person Aishwarya Shiva    schedule 31.05.2015

Ответы (3)


arrow_upward
1
arrow_downward

Иногда вам придется инициализировать JS-часть семантики. Попробуйте вызвать функцию .dropdown() в .onLoad() окна.

window.onload = function(){
    $('.ui.dropdown').dropdown();
};
person ThePenguin    schedule 14.07.2015

arrow_upward
0
arrow_downward

Вы не можете использовать несколько классов меню! . Просто прочитайте документ: http://semantic-ui.com/modules/dropdown.html . Я редактирую вашу скрипку, и теперь она работает:

<div id="itdd" class="ui dropdown search button" style="background:maroon; color:white">
<span class="text">Click to select</span>
<div class="menu">
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="2"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="3"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
    <div class="item" data-value="1"><i class="fa fa-rupee"></i>&nbsp;&nbsp;Currency</div>
</div>

Здесь: http://jsfiddle.net/ow2by6av/7/

person ikourfaln    schedule 31.05.2015
comment
Я уже пробовал это. Вы можете увидеть это в этом обновлении скрипки: jsfiddle.net/ow2by6av/4. Но в скрипке он работает, но не на странице моего сайта. И проблема заключается не в отображении 1 элемента, а в полном раскрывающемся списке. - person Aishwarya Shiva; 31.05.2015
comment
Хм, я думаю, проблема в макете ASP.NET, поэтому для его отладки просто запустите приложение и предоставьте нам исходный код из браузера. - person ikourfaln; 31.05.2015

arrow_upward
0
arrow_downward

В моем случае minchars было установлено больше 1. В этом случае нажатие на раскрывающееся меню не отображает меню.

person dickmao    schedule 09.12.2017