jquery控制的二级菜单，如何让鼠标点击时只显示一个？
下面是一个二级菜单，第二级显示有个问题：
鼠标在另一个元素上点击的时候，原来弹出的二级菜单不会消失。
比如,在“水果”上单击，会弹出“水果”的相应二级菜单；
然后鼠标移到“水生动物”上，会弹出“水生动物”相应的二级菜单，
但是，原来“水果”上的二级菜单不会消失，要达到的效果是让它消失，也就是只显示一个二级菜单。
另一个问题是：
当在一级菜单上点击的时候，如果鼠标点到了链接以外的地方，一级菜单会消失，要达到的效果是不让它消失。
Html:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input type="text" id="input">
<div class="dropdown" style="position:relative">
<a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">点击这里<span
class="caret"></span></a>
<div id="species" class="row dropdown-menu" style="width: 30rem;">
<table class="table table-sm">
<thead>
<tr>
<th>分类</th>
<th>内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>植物</td>
<td>
<ul class="item">
<li class="col-sm-3" v-for="first in group1">
<a class="trigger right-caret">{{first.level01}}</a>
<ul class="row dropdown-menu sub-menu item" style="width: 12rem;">
<li class="col-sm-4" v-for="second in first.level02"><a href="#"
data-species="{{second}}">{{second}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>动物</td>
<td>
<ul class="item">
<li class="col-sm-3" v-for="first in group2">
<a class="trigger right-caret">{{first.level01}}</a>
<ul class="row dropdown-menu sub-menu item" style="width: 12rem;">
<li class="col-sm-4" v-for="second in first.level02"><a href="#"
data-species="{{second}}">{{second}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.17/vue.js"></script>
</body>
</html>
Javascript:
<script>
$(function () {
$(".item >li > a.trigger").on("click", function (e) {
var current = $(this).next();
var grandparent = $(this).parent().parent();
if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".item > li > a:not(.trigger)").on("click", function () {
var root = $(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
input.value = $(this).attr("data-species");
});
$('.dropdown-toggle').click(function () {
$('.sub-menu').hide();
$('.dropdown-menu .trigger').removeClass('left-caret');
$('.dropdown-menu .trigger').addClass('right-caret');
});
$('.sub-menu').mouseleave(function () {
$(this).hide();
$('.dropdown-menu .trigger').removeClass('left-caret');
$('.dropdown-menu .trigger').addClass('right-caret');
});
});
</script>
<script>
var species = new Vue({
el: '#species',
data: {
menu: [{
'group': '1',
'level01': '水果',
'level02': ['苹果', '桃子', '梨']
}, {
'group': '1',
'level01': '树',
'level02': ['苹果树', '梨树', '桃树']
},{
'group': '2',
'level01': '陆生动物',
'level02': ['牛', '羊', '马']
}, {
'group': '2',
'level01': '水生动物',
'level02': ['鲨鱼', '鲸', '海豹']
}]
},
computed: {
group1: function () {
return this.menu.filter(function (m) {
return m.group === '1'
})
},
group2: function () {
return this.menu.filter(function (m) {
return m.group === '2'
})
}
}
});
展开
收起
1
条回答
写回答
写回答
-
问题一
水果和动物的二级菜单显示没有实现互斥，js的第5行改一下var grandparent = $(this).parents();
或者……var grandparent = $(this).parent().parent().parent().parent().parent();
问题二
用Bootstrap的Dropdown就是这个效果，不想要的话，就自己在js加点击事件$('.dropdown-toggle').click(function () { var menu = $(this).siblings(".dropdown-menu"); if(menu.is(":hidden")){ menu.show(); }else{ menu.hide(); }2019-07-17 19:21:14赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
