设置为responsive时，通过其他li元素显示的导航栏的下拉部分
设置为responsive时，通过其他li元素显示的导航栏的下拉部分
提问于 2017-03-02 09:39:42
我一直在尝试让我的导航栏做出响应。到目前为止，当屏幕变小时，我成功地将所有li项显示在彼此下面。然而，我的导航栏的一些li有子项，它们通常会向下(Classes有3个sub li项)。当悬停一个具有子项的li时，它会通过导航栏的主要li项来呈现它们。
我想要的是子菜单不会被悬停触发，而是只有当用户点击他们的屏幕时才会触发。然后，它应该显示父li下的子菜单项，然后继续其他主li的菜单项。
下面的代码是全屏导航栏的工作部分。
.nav a {
text-decoration: none;
color: #fff;
display: inline-block;
padding-left: 15px;
padding-right: 15px;
border-bottom: none;
transition: .5s background-color;
}
.nav ul {
list-style: none;
background-color: #522d54;
text-align: center;
padding: 0;
margin: 0;
display: block;
}
.nav li {
font-family: 'Allerta', Helvetica, Arial, sans-serif;
width: auto;
line-height: 40px;
border-bottom: none;
font-size: 1em;
display: inline-block;
text-align: left;
}
.nav a:hover {
background-color: #39203b;
}
.nav a.active {
cursor: default;
background-color: #824885;
box-shadow: inset 0em -.2em #b084b3;
}
.nav ul li {
position: relative;
display: inline-block;
}
.nav ul li ul li {
text-align: center;
padding: 0;
width: 100%;
}
.nav li ul li a {
text-align: left;
font-size: .8em;
white-space: nowrap;
padding-left: 15px;
padding-right: 15px;
display: block;
}
.nav ul li ul {
position: absolute;
display: none;
width: inherit;
}
.nav li:hover ul {
display: inline-block;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2017-03-02 09:55:59
您需要使用none覆盖悬停显示，因为您不再希望它在悬停时显示。
@media screen and (max-width: 650px) {
.nav li:hover ul {
display: none;
}
}然后，您将需要使用javascript或jquery在单击时将类添加到li：
sub可能类似于(假设您在带有子菜单的项目上有类‘jQuery’)：
$('.nav li.sub').click(function() {
$(this).toggleClass('open-sub-menu');
});新的类是：
.nav li.sub.open-sub-menu ul {
position:relative;
display:block;
}Stack Overflow用户
发布于 2017-03-02 19:36:47
太感谢你了，真的成功了。我完全是一个jquery/js菜鸟，所以这是非常有帮助的。不知何故，我花了15分钟才弄清楚我没有在head标签中链接到jquery。
对于那些和我有同样问题的人，一定要把它放在你的html的标签之间。
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42545346
复制相关文章
相似问题
腾讯云开发者
