问

javascript - jquery控制的二级菜单，如何让鼠标点击时只显示一个？

手机用户2502863963 发布于 2022-11-18 07:56

html

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

另一个问题是：
当在一级菜单上点击的时候，如果鼠标点到了链接以外的地方，一级菜单会消失，要达到的效果是不让它消失。
Html:

分类	内容
植物	{{first.level01}} {{second}}
...	...
...	...
动物	{{first.level01}} {{second}}

Javascript:

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();
    }
});

2022-11-18 08:06 回答

手机用户2502904705

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签