将悬停下拉功能更改为单击功能
将悬停下拉功能更改为单击功能
提问于 2017-09-05 21:39:36
我是CSS和JS的新手。我正试着让我的固定菜单在点击而不是悬停时打开，请谁看看我的CSS和Javacript，告诉我哪里出了问题？
我已经尝试了尽可能多的发挥，但它让我难住了，所以任何帮助都将不胜感激！
.navigation { float: left; }
nav ul ul {
display: none;
position: fixed;
}
nav ul li:click > ul {
display: block;
}
nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #eee;
}
nav ul li a {
display: block; padding: 45px 40px;
color: #757575; text-decoration: none;
font-size: 1.5em
m
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}我的基本javascript是：
$('#menu > li').click(function() {
$( this ).addClass( "active" ).siblings().removeClass("active");
});提前感谢您的帮助！！
回答 2
Stack Overflow用户
发布于 2017-09-05 21:48:45
没有html文件很难理解菜单结构，但我想我知道问题所在。
nav ul li:click > ul {
display: block;
}应该是.active而不是:单击，因为您要在js中添加类.active。
nav ul li.active > ul {
display: block;
}Stack Overflow用户
发布于 2017-09-07 19:29:33
这是我的HTML：
<nav style="width: 100%" id="nav">
<ul>
<img style="padding-left: 20px; padding-top: 2px" src="file:///C:/Users/danr/Desktop/Jsp2/images/menu-images/Langlogomini.png" id="logo" />
<li><a href="#"> Menu <img src="file:///C:/Users/danr/Desktop/images/Down-Arrow.png"> </a>
<ul>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/headmini.png">Head Safety</a></li>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/eyemini.png">Eye Safety</a></li>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/fullhalf.png">Face Masks</a></li>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/disposable.png">Disposable Masks</a></li>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/hearing.png">Ear Safety</a></li>
<li><a href="#"><img style="padding-right: 20px; padding-top: 10px;" src="http://go.jsp.co.uk/images/navbar/contact.png">Contact</a></li>
</ul>
</li>
</ul>
</nav>
<style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46056456
复制相关文章
相似问题
腾讯云开发者
