[英]make CSS hover menu click rather than hover
I have a CSS/HTML menu with this CSS code: 我有一个包含以下CSS代码的CSS / HTML菜单:
#nav {
background-color:#F36F25;
margin:0 0 5px 0;
width: 100%;
height:35px;
left:0;
z-index:1;
border-top:2px solid #FFFFFF;
border-bottom:2px solid #FFFFFF;
}
#nav>li {
float:left;
list-style:none;
}
#nav li:hover ul {
position:absolute;
display:block;
z-index:9999;
}
#nav li a {
display: inline-block;
padding: 8px;
margin:0;
background: #F36F25;
text-decoration: none;
color: #FFFFFF;
border:1px solid #F36F25;
}
#nav li:hover > a, #nav li a.active {
color:#F36F25;
background: #FFFFFF;
border:1px solid #F36F25;
cursor:pointer;
}
#nav li ul {
position:absolute;
display: none;
list-style:none;
margin:0;
}
#nav li ul li {
margin-top:0;
margin-right:0;
margin-bottom:0;
margin-left:-40px;
}
#nav li ul li a {
background-color: #F36F25;
color:#FFFFFF;
border:1px solid #F36F25;
width:145px;
}
#nav li ul li a:hover {
background-color: #FFFFFF;
color:#F36F25;
border:1px solid #f36f25;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
How can i ensure the onhover events stay but make the sub menus show on click rather than when the users hovers on the parent link? 我如何确保悬停事件保持不变,但使子菜单在单击时显示,而不是在用户将鼠标悬停在父链接上时显示?
i am happy to use Jquery or Javascript if needed but full css would be good if possible 我很高兴在需要时使用Jquery或Javascript,但如果可能的话,使用完整的CSS会很好
Let's suppose you want to change display strategies when you click
on your element. 假设您要在
click
元素时更改显示策略。 Let's suppose your element has a selector
. 假设您的元素具有
selector
。 In that case, you can define this event with jQuery: 在这种情况下,您可以使用jQuery定义此事件:
$(selector).click(function() {
if ($(this).hasClass("clicked")) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
And you need to have some CSS for .clicked
as well. 而且,您还需要为
.clicked
提供一些CSS。 Let us suppose your selector is #foo
. 让我们假设您的选择器是
#foo
。 Then you need rules like this: 然后,您需要这样的规则:
#foo {
/*Add some stuff*/
}
#foo.clicked {
/*Add some stuff*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.