【发布时间】：2018-09-05 07:56:34
【问题描述】：
我在li 标签上有一个带有悬停效果的菜单，它将显示在桌面上工作的下拉列表。
桌面没有问题。
现在我要移除移动版的悬停效果，并想在li标签上设置点击事件，这样我的下拉列表将强制下面的li标签正确显示。
参见下面的 sn-p ：
$(document).ready(function(){
if ($(window).width() < 768){
$(".dropdown_list").css("display", "none");
$(".header_menu .menu_list li").click(function(){
$(".dropdown_list").toggle();
});
}
});#header {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
transition: top 0.2s ease-in-out;
}
.header_menu .right_side ul.menu_list {
margin: 0;
padding: 0;
list-style: none;
}
.header_menu .right_side ul.menu_list li {
display: inline-block;
margin: 20px;
}
.header_menu .right_side ul.menu_list li a {
font-size: 16px;
color: #000;
text-transform: uppercase;
}
.header_menu .right_side ul.menu_list li a.resource_link,
.header_menu .right_side ul.menu_list li a.aboutus_link {
padding-bottom: 20px;
}
.header_menu .right_side ul.menu_list li a:hover {
color: #00f;
}
.header_menu .right_side ul.menu_list li ul.dropdown_list {
display: none;
padding: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
position: absolute;
background: #fff;
z-index: 9999;
width: 150px;
margin-top: 10px;
}
ul.dropdown_list li {
display: block !important;
line-height: 22px;
text-align: left;
margin: 0 !important;
position: relative;
}
ul.dropdown_list li a {
font-size: 16px !important;
text-decoration: none;
display: block;
margin: 0 !important;
padding: 8px 10px 8px 25px;
}
ul.dropdown_list li a:hover {
background-color: #DCB856;
color: #fff !important;
transition: 0.2s;
}
.header_menu .right_side ul.menu_list li ul.dropdown_list li a {
color: #000;
}
.header_menu .right_side ul.menu_list li:hover ul.dropdown_list {
display: block;
}
.header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
background-color: #00f;
color: #fff !important;
transition: 0.2s;
}
@media all and (max-width:768px) {
.header_menu .right_side ul.menu_list {
margin-top: 50px !important;
}
.header_menu .right_side ul.menu_list {
margin: 0;
padding: 0;
}
.header_menu .right_side ul.menu_list li {
width: 100%;
margin: 0;
border-bottom: 1px solid #DCB856;
}
.header_menu .right_side ul.menu_list li a {
display: block;
padding: 15px;
}
.fixed .header_menu .right_side ul.menu_list li a {
color: #fff !important;
}
.header_menu .right_side ul.menu_list li ul.dropdown_list li a:hover {
color: #000 !important
}
.header_menu .right_side ul.menu_list li ul.dropdown_list li a {
color: #000 !important;
}
ul.dropdown_list {
display: block;
position: relative !important;
box-shadow: none;
background-color: #fff;
width: 100% !important;
}
}<header id="header">
<div class="header_menu">
<div class="right_side float_right">
<ul class="menu_list">
<li><a href="home" class="home_link">Home</a></li>
<li><a href="javascript:void(0);" class="aboutus_link">About Us</a>
<ul class="dropdown_list about_dropdown">
<li><a href="about1" class="">About 1</a></li>
<li><a href="about2" class="">About 2</a></li>
<li><a href="about3" class="">About 3</a></li>
<li><a href="about4" class="">About 4</a></li>
</ul>
</li>
<li><a href="gallery" class="gallery_link">Gallery</a></li>
<li><a href="javascript:void(0);" class="resource_link">Resources</a>
<ul class="dropdown_list">
<li><a href="resources1">Resources 1</a></li>
<li><a href="resources2">Resources 2</a></li>
<li><a href="resources3">Resources 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>【问题讨论】：
-
您必须等待几秒钟才能触摸您的手机。然后你的 hove efferct 正在激活
-
即使我的脚本正在运行但它并不完美。我的意思是如果我调整窗口大小然后第一次悬停工作并且如果刷新然后单击事件工作。
标签： javascript jquery html css drop-down-menu