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

我不确定你想做什么，但试试这个：http://jsbin.com/ehola3/edit

Answer 2

更改

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

到

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

更多笔记

从return false;事件中删除mouseup，因为该事件没有默认操作。
无需同时为e.preventDefault();和return false调用链接..一个就足够了。（如果你想停止冒泡，那么只使用return false
查看.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/

更新评论

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

$(".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/

Answer 3

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

类似的东西？

Answer 4

您应该使用toggle（）来显示和隐藏内容。

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button>Toggle</button>
<p style="display: none">Hello</p>
<script>

$("button").click(function () {
  $("p").toggle("show");
});
</script>

</body>
</html>

Answer 5

您可以使用toggleClass来切换hide类

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

工作示例：HERE

<强> HTML：

<a href="#" class="btn">Show/Hide</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").toggleClass('hide');
});

<强> CSS：

.hide {display: none;}

下拉列表问题

5 个答案:

工作示例：HERE