Question

如何在用户点击另一个下拉列表时自动关闭下拉列表？目的是当时没有打开一个下拉列表。

Jquery的：

jQuery(".navbar-collapse .nav li").click(function(e) {

        if(jQuery(e.currentTarget).find("span").hasClass("clicked-li")) {
            jQuery(".navbar-collapse .nav li ul").removeClass("clicked");
            jQuery(".navbar-collapse .nav li span").removeClass("clicked-li");
        }

        if ((viewport().width <= 1200)) {
            if (!jQuery(e.currentTarget).find("ul").hasClass("clicked")) {
                jQuery(e.currentTarget).find("ul").addClass('clicked');
                jQuery(e.currentTarget).find("span").addClass('clicked-li');
            } else {
                jQuery(e.currentTarget).find("ul").removeClass('clicked');
                jQuery(e.currentTarget).find("span").removeClass('clicked-li');
            }
        }
    });

HTML：

<div class="navbar-collapse collapse in" aria-expanded="true" style="">
    <ul class="nav menu">
        <li class="item-101 default current active fa fa-chevron-down">
            <a href="/">Home</a><
        /li><li class="item-115 divider deeper parent fa fa-chevron-down">
        <span class="separator">XXX</span>
        <ul class="nav-child unstyled small">
            <li class="item-123 fa fa-chevron-down">
                <a href="XXX">XXX</a>
            </li>
            <li class="item-125 fa fa-chevron-down">
                <a href="XXX">XXX</a>
            </li><li class="item-126 fa fa-chevron-down">
                <a href="XXX">XXX</a>
            </li>
        </ul>
    </ul>
</div>

这对我来说似乎很烦人，有谁知道怎么做？

Answer 1

$('.clicked').removeClass('.clicked');

但是，请将您的代码设为一个代码段，这样可以更轻松地为您提供帮助。

但无论如何使用CSS。它更容易。

li {
  display: none;
}
a:focus li {
  display: block;
}

<!DOCTYPE html>
<html>
<head>
  <title>test</title>
</head>

<body><ul>
<a href="#">HO

  <li>Hi</li>
  <li>Hi</li>
</a>
</ul><br>
<ul>
<a href="#">asdf
  <li>Hi</li>
  <li>Hi</li>
</a>
</ul>
</body>
</html>

Jquery添加点击事件并将其删除给其他人

1 个答案: