如何使CSS下拉菜单点击下拉菜单 [英] How to make CSS dropdown menu on click to dropdown
问题描述
如何使以下css下拉菜单只接受点击下拉?例如,现在鼠标悬停请选择。第二层出现。我想改为点击请选择,第二层出现。此外,点击事件应适用于第二层菜单。
这是一个小提琴
我正在使用jquery,但不知道该怎么做。
html代码
< ul class =dropdown >
< li>< a href =#>请选择< / a>
< ul class =sub_menu>
< li>
< a href =#>人造草坪< / a>
< ul>
< li>< a href =#>室内< / a>< / li>
< li>< a href =#> Outdoor< / a>< / li>
< / ul>
< / li>
< li>
< a href =#>击球笼< / a>
< ul>
< li>< a href =#>室内< / a>< / li>
< li>< a href =#> Outdoor< / a>< / li>
< / ul>
< / li>
< / ul>
< / li>
< / ul
CSS代码
/ *
LEVEL ONE
* /
ul.dropdown {position:relative; }
ul.dropdown li {font-weight:bold; float:left;放大:1;背景:#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;
颜色:#222; }
ul.dropdown li:last-child a {border-right:none; } / *在IE * /
中无法正常工作b.bull.Leff,
ul.dropdown li:hover {background:#F3D673;颜色:黑色位置:亲戚; }
ul.dropdown li.hover a {color:black; }
/ *
LEVEL TWO
* /
ul.dropdown ul {width:220px;能见度:隐藏;位置:绝对顶部:100%;左:0; }
ul.dropdown ul li {font-weight:normal;背景:#f6f6f6;颜色:#000;
border-bottom:1px solid #ccc; float:none; }
/ * IE 6& 7需要内嵌块* /
ul.dropdown ul li a {border-right:none;宽度:100%;显示:inline-block; }
/ *
LEVEL THREE
* /
ul.dropdown ul ul {left:100%;顶部:0; }
ul.dropdown li:hover> ul {visibility:visible;
正如我在您的css中注意到的,显示或隐藏ul-s,因此您应该使用此代码
$(。dropdown li)。click (){
$(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; }
关闭标签使用此代码
$(。dropdown ul)css({visibility:hidden});
});
$('。dropdown').click(function(event){
event.stopPropagation();
});
最后一部分取自此stackoverflow问题如何检测元素之外的点击?
还可以修改位置更改,如果悬停将您的css中的2行更改为此
ul.dropdown li {font-weight:bold ; float:left;放大:1;背景:#ccc;位置:亲戚; }
How to make the following css dropdown menu only accept click to dropdown? For example, now when mouse hover "Please Select". The second layer appears. I want to change to when click "Please Select", the second layer appears. Also the click event should apply to second layer menu.
This is a Fiddle
I'm using jquery but don't know how to do this.
The html codes
<ul class="dropdown">
<li><a href="#">Please select</a>
<ul class="sub_menu">
<li>
<a href="#">Artificial Turf</a>
<ul>
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
<li>
<a href="#">Batting Cages</a>
<ul>
<li><a href="#">Indoor</a></li>
<li><a href="#">Outdoor</a></li>
</ul>
</li>
</ul>
</li>
</ul
The CSS code
/*
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; }
As I noticed in your css you use visibility to show or hide ul-s, so you should use this code
$(".dropdown li").click(function() {
$(this).parent().children("li").not(this).children("ul").css({ "visibility":"hidden" });
$(this).children("ul").css({ "visibility":"visible" });
})
and you should also remove this line from your css
ul.dropdown li:hover > ul { visibility: visible; }
to close tabs use this code
$('html').click(function() {
$(".dropdown ul").css({ "visibility":"hidden" });
});
$('.dropdown ').click(function(event){
event.stopPropagation();
});
last part taken from this stackoverflow question How to detect a click outside an element?
also to fix position change in case of hover out change 2 line in your css to this
ul.dropdown li { font-weight: bold; float: left; zoom: 1; background: #ccc; position: relative; }
这篇关于如何使CSS下拉菜单点击下拉菜单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!