[英]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.