jquery控制的二级菜单,如何让鼠标点击时只显示一个?-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

jquery控制的二级菜单,如何让鼠标点击时只显示一个?

小旋风柴进 2016-05-31 09:04:05 1347

下面是一个二级菜单,第二级显示有个问题:
鼠标在另一个元素上点击的时候,原来弹出的二级菜单不会消失。
比如,在“水果”上单击,会弹出“水果”的相应二级菜单;
然后鼠标移到“水生动物”上,会弹出“水生动物”相应的二级菜单,
但是,原来“水果”上的二级菜单不会消失,要达到的效果是让它消失,也就是只显示一个二级菜单。

另一个问题是:
当在一级菜单上点击的时候,如果鼠标点到了链接以外的地方,一级菜单会消失,要达到的效果是不让它消失。
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'
                })
            }
        }
        });
JavaScript 前端开发
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:21:14

    问题一
    水果和动物的二级菜单显示没有实现互斥,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();
        }
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程