在单击列表项时切换 div 的可见性 [关闭]答案

【问题标题】：toggling visibility of div on click of a list item [closed]在单击列表项时切换 div 的可见性 [关闭]
【发布时间】：2014-05-30 19:57:35
【问题描述】：

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

【问题讨论】：

告诉我们你到目前为止尝试了什么
阅读 here 以使用 jquery 进行切换

标签： javascript jquery css jquery-selectors

【解决方案1】：

悬停时

首先在css中你需要隐藏子菜单，像这样

css

ul li ul{
    display:none;
}

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

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

点击

像这样使用toggleClass

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

css

.showSubmenu{
    display:block;
}

注意

你需要把class放在ul上，或者用class把ul包装在div中，然后用那个class在jquery中定位，否则它将应用于网页上的所有ul li。

【讨论】：

超级。谢谢。这正是我想要的。
我还更新了点击代码，请查看。谢谢。

【解决方案2】：

这应该让您使用.click，因为其他人给了您一种方法来让它与悬停一起工作。这是一个小提琴：http://jsfiddle.net/v6X7x/1/

（看看小提琴中的html）

用css隐藏二级菜单项：

.layer2 {
    display: none;
}

最后添加一个 jQuery click 事件处理程序，它首先检查是否存在 .layer2，如果存在则切换：

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

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

【讨论】：

【解决方案3】：

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

以下代码在问题中指定的同一a-tag 上提供.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();
});

【讨论】：