javascript - 下拉列表问题

Question

HTML

   <a id="btn" class="btn" href="#."></a>
   <div id="main-dropdown" class="hide">
       <ul id="dropdown">
          <li><a href="/">Back </a></li>
          <li><a href="/foo">Foo </a></li>
          <li><a href="/bar">Bar </a></li>
          <li><a href="/baz">Baz </a></li>
          <li><a href="/no">No Bar </a></li>
       </ul>
   </div>

Jquery

$(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").removeClass('hide');
    $("#main-dropdown").addClass('show');
    return false;
});

$("#dropdown").mouseup(function() {
    return false
});

$(document).mouseup(function(e) {
    if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").removeClass('show');
        $("#main-dropdown").addClass('hide');
        return false;
    }
    $("#main-dropdown").removeClass("show");
    $("#main-dropdown").addClass("hide");
});

问题:当我点击 href (id = btn) 时会出现一个下拉菜单，但是当我再次点击该按钮时应该隐藏这没有发生。我哪里做错了。

Answer 1

改变

$("#dropdown").mouseup(function() {
    return false
});

到

$("#dropdown a").click(function() {
    return false;
});

一些注意事项

1. 从 mouseup 事件中删除 return false;，因为该事件没有默认操作..
2. 无需为链接同时调用 e.preventDefault(); 和 return false。一个就足够了。 (如果你想停止冒泡，那么只使用 return false
3. 查看 .toggleClass()

简化版

$(".btn").click(function(e) {
    e.preventDefault();
    if($('#main-dropdown').hasClass('hide')){
        $("#main-dropdown").toggleClass('hide show');
    }
});

$("#dropdown a").click(function() {
    return false;
});

$(document).mouseup(function(e) {
      if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").toggleClass('hide show');
    }
});

演示 http://jsfiddle.net/gaby/yjWNg/1/

---

评论更新

我们应该处理所有情况下的点击事件，这是一个小错误。

$(".btn").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $("#main-dropdown").toggleClass('show hide');
});

$("#dropdown a").click(function() {
    return false;
});

$(document).click(function(e) {
      if($('#main-dropdown').hasClass('show')) {
        $("#main-dropdown").toggleClass('hide show');
    }
});

演示 http://jsfiddle.net/gaby/yjWNg/5/