Как сделать CSS выпадающим меню при нажатии на выпадающее меню
Как сделать, чтобы следующее выпадающее меню CSS принимало только щелчок к раскрывающемуся меню? Например, теперь, когда мышь завислаПожалуйста выберите", Второй слой появляется. Я хочу изменить, когда нажмитеПожалуйста выберите"появляется второй слой. Также событие нажатия должно относиться к меню второго слоя.
ЭтоFiddleI»
Я использую JQuery, но нене знаю, как это сделать.
HTML-коды
<a href="#">Please select</a>
<a href="#">Artificial Turf</a>
<a href="#">Indoor</a>
<a href="#">Outdoor</a>
<a href="#">Batting Cages</a>
<a href="#">Indoor</a>
<a href="#">Outdoor</a>
Ответы на вопрос(1)
Как я заметил в вашей CSS, вы используете видимость, чтобы показать или скрыть ul-s, поэтому вы должны использовать этот код
$(".dropdown li").click(function() {
$(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
$(this).children("ul").css({ "visibility":"visible" });
})
и вы также должны удалить эту строку из вашего CSS
ul.dropdown li:hover > ul { visibility: visible; }
чтобы закрыть вкладки используйте этот код
$('html').click(function() {
$(".dropdown ul").css({ "visibility":"hidden" });
});
$('.dropdown ').click(function(event){
event.stopPropagation();
});
последняя часть взята из этого вопроса stackoverflowКак обнаружить щелчок за пределами элемента?
также, чтобы исправить изменение положения в случае зависания, измените 2 строки в вашем CSS к этому
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }
:activeили же .:focus