javascript - 下拉菜单不关闭 jQuery

Question

谁能解释一下我做错了什么，如果你点击第一个链接(链接 1)它会打开一个菜单，如果你点击菜单中的一个“li”它会关闭菜单。

如果我点击第二个链接(链接 2)，它会打开一个不同的菜单，但是当我点击菜单中的一个“li”时，什么也没有发生，我想做的是关闭菜单。

jsfiddle ( http://jsfiddle.net/BdhxL/ )

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

您有重复的 ID。$("#dropMenu").hide("slow"); 始终针对第一个 dropMenu。使用 $(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