Как сделать 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>
                    
                 
            
        
    
 danijar14 нояб. 2012 г., 16:40
Кстати, строки 7 и 8 в вашем CSS-коде идентичны и поэтому избыточны.
 danijar14 нояб. 2012 г., 16:36
Мне интересно решение CSS без использования Javascript. Может быть, это можно сделать с помощью псевдо-селекторов:active или же .:focus

Ответы на вопрос(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; }
 user50385314 нояб. 2012 г., 23:28
Привет Джон, Не могли бы вы сказать мне, как закрыть меню после того, как я щелкну по пункту меню третьего слоя? Я использую <код>$ (».dropdown ul ") .css ({"видимость «:»скрытый» }); </ Код> когда захват события клика, но не работает.
 John14 нояб. 2012 г., 17:29
сделано, пожалуйста, проверьте это
 user50385314 нояб. 2012 г., 17:47
Большое спасибо, Джон.
 user50385314 нояб. 2012 г., 17:11
Также кажется, что при щелчке по подменю и при наведении курсора мыши на другое подменю перекрываются.
 user50385314 нояб. 2012 г., 17:08
Большое спасибо, Джон. Я попробовал это в этой скрипкеjsfiddle.net/donli/panzd/3   , Когда мышь выходит из меню,Пожалуйста выберите" исчез. При щелчке в любом месте из меню оно появляется снова. Пожалуйста посоветуй!
 user50385316 нояб. 2012 г., 08:45
 John15 нояб. 2012 г., 00:16
@ Соп, хочешь закрыть третий слой при повторном нажатии на второй слой?
 John14 нояб. 2012 г., 17:20
Я исправил часть перекрытия, ошибка зависания, кажется, зависит от css, подожди, я попытаюсь выяснить это
 user50385315 нояб. 2012 г., 15:49
Я хочу закрыть все меню после нажатия третьего слоя. Спасибо!
 user50385314 нояб. 2012 г., 23:39
Пожалуйста, посмотрите эту скрипкуjsfiddle.net/donli/panzd/7
 user50385314 нояб. 2012 г., 16:51
Я хочу закрыть меню, когда я нажимаю на любые места из меню.

Ваш ответ на вопрос