当设置为响应时，通过其他li元素显示的导航栏的下拉部分

我一直在试图让我的导航栏响应。到目前为止，我设法在屏幕变小时显示彼此之下的所有li项目。然而，我的导航栏中的某些li有通常会下降的子项（类有3个子li）。当悬停其中一个具有子条目的li时，它将呈现它们通过导航栏的主li项。当设置为响应时，通过其他li元素显示的导航栏的下拉部分

我想要的是子菜单不会被悬停触发，但只有当用户点击他们的屏幕。之后，它应该显示父li下面的子菜单项，然后继续其他主li。

下面的代码是全屏导航栏的工作部分。

Demo

.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; 
}

来源

2017-03-02 Ruben

你需要重写与你无关悬停显示，因为你不再需要它显示悬停。

@media screen and (max-width: 650px) { 
    .nav li:hover ul { 
    display: none; 
    } 
}

然后，你将需要使用JavaScript或jQuery的一类添加到丽日点击：

jQuery的可能是这样的（假设你有类与子菜单项“子”）：

$('.nav li.sub').click(function() { 
    $(this).toggleClass('open-sub-menu'); 
});

新类是：

.nav li.sub.open-sub-menu ul { 
    position:relative; 
    display:block; 
}

来源

2017-03-02 01:55:59 user500665

谢谢你这么多，真正做的伎俩。我是一个完整的jquery/js noob，所以这是非常有用的。不知怎的，我花了15分钟才知道我没有链接到头标签中的jquery。

对于那些与我相同的问题，一定要把它放在你的html标签之间。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

来源

2017-03-02 11:36:46 Ruben

当设置为响应时，通过其他li元素显示的导航栏的下拉部分

回答

相关问题