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

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

悬停

首先，在css中，您需要隐藏子菜单，如下所示

css

js

.hoverfirst参数，[second parameter]第一个参数将鼠标移入，第二个参数将鼠标移出，这是可选的。对于这两个参数，我们都创建了匿名函数

点击

像这样使用toggleClass

js

css

注

---

您需要将类放在ul上，或将ul用class包装在div中，然后在jquery中用该类设置target，否则它将应用于网页上的所有ul li。

这应该可以让您继续使用。其他人给了您一种使用hover的方法，请单击。这是一把小提琴：

看看小提琴中的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();
    }
});

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

工作示例：

下面的代码提供了问题中指定的同一个a标记上的、和事件

JavaScript:

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

---

向我们展示迄今为止您使用jquerySuper尝试切换的内容。谢谢这正是我要找的。我还更新了click的代码，请查看。谢谢

.showSubmenu{
    display:block;
}

.layer2 {
    display: none;
}

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

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