Question

我的导航列表项包含＆＃34; a＆＃34;标签。其中一个列表项有一个子菜单，应该在悬停或单击父列表项时显示。如何使用jquery切换它？

Answer 1

悬停

首先在css中你需要隐藏子菜单，比如这个

CSS

ul li ul{
    display:none;
}

JS

$('ul li').hover(function(){
    $('ul',this).css('display','block');
},function(){
    $('ul',this).css('display','none');
});

.hover(first parameter, [second parameter])第一个参数取鼠标，第二个取鼠标，这是可选的。对于这两个参数，我们创建了匿名函数。

点击

像这样使用toggleClass

JS

$('ul li').click(function() {
    $('ul',this).toggleClass( 'showSubmenu');
});

CSS

.showSubmenu{
    display:block;
}

注意

你需要把类放在ul上，或者用div将div包装在div中，然后在jquery中使用该类定位，否则它将被应用于网页上的所有文件。

Answer 2

这可以让你选择.click，因为别人给你一个让它在悬停时工作的方法。这是一个小提琴：http://jsfiddle.net/v6X7x/1/

（看看小提琴中的html）

使用css隐藏第二级菜单项：

.layer2 {
    display: none;
}

最后添加一个jQuery点击事件处理程序，首先检查是否存在.layer2，然后切换是否存在：

$(".layer1 li").click(function() {
    var num = $(this).find("ul.layer2").length;
    if (num > 0) {
        jQuery(this).children("ul.layer2").slideToggle();
    }
});

仅供参考：如果你把你已经完成的一些事情放在问题中，你可能会得到更好的答案。

Answer 3

工作示例：http://jsfiddle.net/awesome/y924G/

以下代码在问题中指定的同一a - 代码中提供.toggle()，.click()和.hover()个事件。

JavaScript的：

$dm = $('.dropdown-menu');
$('.dropdown').hover(
  function () {
    $dm.show();
  }, function () {
    $dm.hide();
}).click(function () {
    $dm.toggle();
});
$dm.hover(
  function () {
    $dm.show();
  }, function () {
    $dm.hide();
});

单击列表项切换div的可见性

3 个答案: