我创建了一个下拉菜单点击,但它有点奇怪。当我单击按钮下拉菜单时,出现了下拉菜单。但是当我将光标移动到另一个(没有再次单击按钮下拉菜单)时,下拉菜单消失并且它变成了可悬停的下拉菜单而不是下拉菜单单击(抱歉我的英语不好)
单击下拉按钮并移动光标时,如何使下拉菜单单击始终出现?
(这是我的代码)
HTML
<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;
}
查询
$(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>
关于javascript - Jquery下拉菜单点击总是打开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48011886/