[英]make CSS hover menu click rather than hover
我有一个包含以下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;
}
我如何确保悬停事件保持不变,但使子菜单在单击时显示,而不是在用户将鼠标悬停在父链接上时显示?
我很高兴在需要时使用Jquery或Javascript,但如果可能的话,使用完整的CSS会很好
我认为您可以像这样用:focus
而不是:hover
更新此代码
或通过js 小提琴
#nav li:focus ul { position:absolute; display:block; z-index:9999; }
假设您要在click
元素时更改显示策略。 假设您的元素具有selector
。 在这种情况下,您可以使用jQuery定义此事件:
$(selector).click(function() {
if ($(this).hasClass("clicked")) {
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
}
});
而且,您还需要为.clicked
提供一些CSS。 让我们假设您的选择器是#foo
。 然后,您需要这样的规则:
#foo {
/*Add some stuff*/
}
#foo.clicked {
/*Add some stuff*/
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.