Jquery下拉菜单单击始终打开
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery下拉菜单单击始终打开相关的知识，希望对你有一定的参考价值。
我创建了一个下拉菜单点击，但它有点奇怪。单击按钮下拉列表时，会出现下拉菜单。但是当我将光标移动到另一个时（没有再点击按钮下拉菜单），下拉菜单消失，它已成为可下降的下拉菜单而不是下拉菜单点击（抱歉我的英文不好）
当我单击按钮下拉菜单并移动光标时，如何使下拉菜单单击始终显示？
（这是我的代码）
<aside class="sidebar">
<ul>
<li><a href="#"><i class="material-icons">home</i>Homepage</a></li>
<li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle"><i class="material-icons">widgets</i>Events Organizer <i class="material-icons multi_menu">keyboard_arrow_right</i></a>
<ul class="dropdown_menu">
<li><a href="#">Create Events</a></li>
<li><a href="#">List Events</a></li>
</ul>
</li>
<li><a href="#"><i class="material-icons">people</i>Peserta Events</a></li>
</ul>
</aside>
CSS
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
aside.sidebar ul li ul.dropdown_menu.active {
opacity: 1;
visibility: visible;
height: auto;
width: 100%;
background-color: #34495e;
left: 100%;
top: 0;
transition: all 0.5s;
}
jQuery的
$(document).ready(function () {
$(".button_dropdown").click(function () {
$(".dropdown_menu").toggleClass("active");
});
});
答案
我个人会使用hover而不是click作为儿童菜单。让我知道你如何使用它。在点击之前保持活动状态。
aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}
使用此代码段。
$(document).ready(function() {
$('.button_dropdown').click(function() {
$('.dropdown_menu').toggleClass('active');
});
});aside.sidebar ul li ul.dropdown_menu {
display: none;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
left:200px;
top:0;
}
aside.sidebar ul li ul.dropdown_menu.active {
display: block !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<aside class="sidebar">
<ul>
<li>Homepage</li>
<li class="button_dropdown"><a href="javascript:void(0)" class="dropdown-toggle">Events Organizer</a>
<ul class="dropdown_menu">
<li>Create Events</li>
<li>List Events</li>
</ul>
</li>
<li>Peserta Events</li>
</ul>
</aside>另一答案
在不更改代码的情况下，您可以通过添加以下内容来删除指针事件（点击等）。
pointer-events:none;到aside.sidebar ul li ul.dropdown_menu
和
pointer-events:auto;到aside.sidebar ul li ul.dropdown_menu.active
另一答案
可停滞的下拉菜单是因为你已经在你的css中将opacity属性设置为0（dropdown_menu）。您必须更改不透明度：0到不透明度：1。这是您的错误代码：
aside.sidebar ul li ul.dropdown_menu {
opacity: 0;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
替换为（固定不透明度）：
aside.sidebar ul li ul.dropdown_menu {
opacity: 1;
visibility: hidden;
height: auto;
width: 100%;
margin-top: -1px;
position: absolute;
transition: all 0.5s;
border-left: 1px solid #2c3e50;
background-color: #34495e;
}
以上是关于Jquery下拉菜单单击始终打开的主要内容，如果未能解决你的问题，请参考以下文章