html鼠标点击显示二级菜单内容,jquery控制的二级菜单，如何让鼠标点击时只显示一个？...

下面是一个二级菜单，第二级显示有个问题：

鼠标在另一个元素上点击的时候，原来弹出的二级菜单不会消失。

比如,在“水果”上单击，会弹出“水果”的相应二级菜单；

然后鼠标移到“水生动物”上，会弹出“水生动物”相应的二级菜单，

但是，原来“水果”上的二级菜单不会消失，要达到的效果是让它消失，也就是只显示一个二级菜单。

另一个问题是：

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

Html:

点击这里

class="caret">

分类内容

植物

• {{first.level01}}

  • data-species="{{second}}">{{second}}

............动物

• {{first.level01}}

  • data-species="{{second}}">{{second}}

Javascript:

$(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');

});

});

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'

})

}

}

});