如何在点击下拉菜单上制作CSS下拉菜单

如何制作以下css下拉菜单只接受点击下拉菜单？ 例如，现在当鼠标hover“请选择”时。 出现第二层。 我想改为点击“请选择”，第二层出现。 click事件也应该适用于第二层菜单。

这是一个小提琴

我正在使用jquery但不知道如何做到这一点。

HTML代码

 
Please select 
 
 Artificial Turf 
 
Indoor
 
Outdoor
 
 
 
 Batting Cages 
 
Indoor
 
Outdoor
 
 
 
 
 </ul​ 

CSS代码

 /* LEVEL ONE */ ul.dropdown { position: relative; } ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; } ul.dropdown a:hover { color: #000; } ul.dropdown a:active { color: #ffa500; } ul.dropdown li a { display: block; padding: 4px 8px; border-right: 1px solid #333; color: #222; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { background: #F3D673; color: black; position: relative; } ul.dropdown li.hover a { color: black; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; background: #f6f6f6; color: #000; border-bottom: 1px solid #ccc; float: none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; } /* LEVEL THREE */ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; }​ 

Answer 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问题如何检测元素外的点击？

还可以在你的css中将2行更改为此时修复位置变化

 ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }