如何保持菜单下拉菜单显示,导航菜单项和下拉菜单项并关闭'close'按钮
How to keep menu dropdown shown, navigate through menu items and dropdown items and close on 'close' button
我做了搜索,但没有找到解决方案。我需要一个下拉菜单总是打开,甚至通过导航到其他菜单项和下拉菜单项。并且只能关闭。close按钮。On mouseenter piece:
$('.main-nav ul > li').mouseenter(function(e){
$(this).addClass('active').find('.dropdown-menu').show();
}).mouseleave(function(e){
$(this).removeClass('active').find('.dropdown-menu').hide();
});
点击按钮:
$('.dropdown-menu .close').click( function(e){
e.stopPropagation();
$('.dropdown-menu').hide();
$('.dropdown .dropdown-toggle').parent().removeClass('active');
console.log('close btn!');
});
我也可以检查,如果在菜单外点击:
var container = $('.dropdown');
//check if the clicked area is dropdown or not
if (container.has(e.target).length === 0) {
$('.dropdown-menu').hide();
console.log('clicked out!');
}
但是如何保持下拉总是显示aka引导?并且只关闭按钮'。关闭还是重新加载?我可以实现它在点击,它的工作,因为我需要,但要求是做它在悬停。显示下拉项目悬停像MegaNav,能够改变悬停在所有菜单项和关闭按钮,而不是在鼠标离开。同时可以浏览顶部菜单项和所有子菜单项。
小提琴:https://jsfiddle.net/b9Lgvuom/
我用一个简单的例子来说明它是如何工作的。
我用一个唯一的ID和一些描述性文本更新了关闭按钮。然后,我添加了以下代码,以便在单击按钮以关闭下拉菜单时运行。
$("#btnCloseMenu").on("click", function() {
$('.dropdown-menu').hide();
});
然后我注释掉了在"mouseleave"上关闭菜单的那行代码,这样当用户将光标移开时它就不会关闭。根据菜单结构(即子菜单)的复杂性,您的解决方案可能需要一些额外的逻辑,以便用户可以浏览。
有很多方法可以完成你的要求。选择对你最有意义的选项
感谢jQuery论坛和JΛ解决方案如下:
$(document).ready(function () {
$('.main-nav ul > li').mouseenter(function(e){
$('.active').removeClass('active').find('.dropdown-menu').hide();
$(this).addClass('active').find('.dropdown-menu').show();
});
$('.dropdown-menu .close').click( function(e){
e.stopPropagation();
$(this).closest('.dropdown-menu').hide().parent().removeClass('active');
console.log('close btn!');
});
});
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.dropdown {
position: relative;
display: block;
float: left;
padding-right: 10px;
margin-right: 15px;
}
.dropdown.active > a {
color: green;
}
.dropdown-menu {
width: 100%;
top: 33px;
min-width: 300px;
box-shadow: 0 10px 10px rgba(0, 0, 0, .15);
background: #f7f7f7;
height: auto;
position: absolute;
top: 100%;
left: 0px;
display: none;
float: left;
}
.dropdown-menu .dropdown-wrapper {
position: relative;
}
.dropdown-menu .dropdown-wrapper .close {
position: absolute;
height: 25px;
width: 25px;
border: 0;
top: 5px;
outline: none;
right: 10px;
z-index: 2;
cursor: pointer;
background: none;
}
.dropdown-menu .dropdown-wrapper .close:before, .dropdown-menu .dropdown-wrapper .close:after {
content: "";
opacity: 1;
border-bottom: 1px solid #000;
position: absolute;
top: 50%;
left: 0;
width: 100%;
}
.dropdown-menu .dropdown-wrapper .close:before {
transform: rotate(45deg);
}
.dropdown-menu .dropdown-wrapper .close:after {
transform: rotate(-45deg);
}
.category-menu a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav">
<ul>
<li class="dropdown">
<a href="#" class="toggle">Category 1</a>
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
<a href="#">Subcategory 1</a>
<a href="#">Subcategory 2</a>
<a href="#">Subcategory 3</a>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="toggle">Category 2</a>
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
<a href="#">Subcategory 1</a>
<a href="#">Subcategory 2</a>
<a href="#">Subcategory 3</a>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="toggle">Category 3</a>
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
<a href="#">Subcategory 1</a>
<a href="#">Subcategory 2</a>
<a href="#">Subcategory 3</a>
</div>
</div>
</div>
</li>
<li class="dropdown">
<a href="#" class="toggle">Category 4</a>
<div class="dropdown-menu">
<div class="dropdown-wrapper">
<!--- close button --->
<button class="close"></button>
<div class="category-menu">
<a href="#">Subcategory 1</a>
<a href="#">Subcategory 2</a>
<a href="#">Subcategory 3</a>
</div>
</div>
</div>
</li>
</ul>
</div>
相关文章:
- 设计Django中当前导航菜单项的样式
- 将菜单项与滚动绑定时出现Jquery错误
- HTML5上下文菜单-当菜单项被点击时,访问最初被点击的元素
- 如何使活动菜单项具有突出显示样式
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 如何在每个下拉菜单项的每个类别下输出链接
- 突出显示菜单项及其子菜单项
- 菜单项 - 单击淡入和淡出
- 更改母版页中菜单项的类
- 引导程序3-下拉菜单项中的取消按钮
- JQuery UI菜单防止子菜单项折叠
- 如果其中一个子菜单项处于活动状态,则展开下拉菜单
- 在表格最后一行(链接)中显示菜单,并在单击菜单项时显示模式窗口
- Joomla:菜单项指向同一页面中的不同位置
- 单击菜单项更改HTML内容
- 选择单选按钮或下拉菜单项时自动更新PHP变量
- Jquery 响应式导航栏,在菜单项单击或菜单按钮单击时折叠
- 如何保持菜单下拉菜单显示,导航菜单项和下拉菜单项并关闭'close'按钮
- 我想激活选项卡菜单项上的一个按钮单击
- 在按钮角度上显示所选菜单项的值