Question

有人可以解释一下我做错了什么，如果你点击第一个链接（链接1）它会打开一个菜单，如果你点击其中一个＆＃39; li＆＃39;在菜单中关闭菜单。

如果我点击第二个链接（链接2），它会打开一个不同的菜单，但是当我点击其中一个＆＃39; li＆＃39;在菜单里面没有任何反应，我想要做的就是关闭菜单。

HTML代码：

<a href="#">Link 1</a> 
        <div id="dropMenu">
          <ul>
            <li><a href="#index">Portfolio</a></li> 
          </ul> 
        </div>
 <br><br>   
    <a href="#">Link 2</a> 
        <div id="dropMenu">
          <ul>
            <li><a href="#index">Contact us </a></li> 
          </ul> 
        </div>

JS代码：

$(document).ready(function() {
  $("li").click(function()
  {
    $("#dropMenu").hide("slow");
  });

  $("a").click(function()
  {
    $(this).toggleClass("active");
    $(this).next("div").stop('true','true').slideToggle("slow");
  });
});

 #dropMenu {
    display: none; 
    position: relative; 
    right: 5px; 
    background: #000; 
    color: black; 
    margin:50px -5% 0% -142%;
    padding: 0px 0px 0px 10px; 
}

#dropMenu a { 
    display: block; 
    color: #fff; 
    text-decoration: none; 
    padding:10px 6px;
    font-weight:400;
    border-bottom: solid 1px #fff;

}

CSS代码：

#dropMenu ul {
    margin:0;
}

#dropMenu a:hover { 
    background: #57585A; 
}

#dropMenu ul {
    list-style:none;
    padding:0;
}

Answer 1

目前，您的列表的父div id已复制<div id="dropMenu">，您需要使用类：

<div class="dropMenu">

然后您可以使用 .closest() 来定位点击.dropMenu的最匹配li：

$(document).ready(function () {
    $("li").click(function () {
        $(this).closest(".dropMenu").hide("slow");
    });

    $("a").click(function () {
        $(this).toggleClass("active");
        $(this).next("div").stop('true', 'true').slideToggle("slow");
    });
});

您还需要将CSS中的所有#dropMenu更改为.dropMenu。

<强> Updated Fiddle

Answer 2

您有重复的ID。$("#dropMenu").hide("slow");始终以第一个下拉菜单为目标。使用$(this)定位当前并隐藏最近的div。请尝试：

$(document).ready(function() {
 $("li").click(function()
 {
  $(this).closest("div").hide("slow");
});

 $("a").click(function()
 {
  $(this).toggleClass("active");
  $(this).next("div").stop('true','true').slideToggle("slow");
});});

<强> Working Demo

下拉菜单没有关闭jQuery

2 个答案: