Javascript 下拉列表问题_Javascript_Jquery

Javascript 下拉列表问题

javascript jquery

Javascript 下拉列表问题,javascript,jquery,Javascript,Jquery,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 &l

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>

问题: 当我单击href（id=btn）时，会出现一个下拉列表，但当我再次单击该按钮时，会显示“应该隐藏”

但事实并非如此。我做错了什么。

我不确定你想做什么，但尝试一下：

改变

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

到

还有一些注释

删除

返回falsemouseup

事件的code>，因为该事件没有默认操作


无需同时调用e.preventDefault（）和对于链接返回false
。。一个就够了。（如果要停止冒泡，请仅使用return false

查看
简化版
$(".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');
    }
});

演示

更新以供评论
我们在所有情况下都应该处理单击事件，这是一个小错误
$(".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');
    }
});

演示更改
$("#dropdown").mouseup(function() {
    return false
});

到
还有一些注释
从mouseup
事件中删除return false；
，因为该事件没有默认操作
对于链接，不需要同时调用e.preventDefault（）；
和return false
。一个就足够了。（如果要停止冒泡，请只使用return false
查看
简化版
$(".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');
    }
});

演示

更新以供评论
我们在所有情况下都应该处理单击事件，这是一个小错误
$(".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');
    }
});

演示
像这样的
类似的东西？
您真的应该使用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> 


切换
您好
$（“按钮”）。单击（函数（）{
$（“p”）。切换（“显示”）；
});
您真的应该使用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> 


切换
您好
$（“按钮”）。单击（函数（）{
$（“p”）。切换（“显示”）；
});
您可以使用来切换隐藏类
$(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").toggleClass('hide');
});

工作示例：
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>

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

.hide {display: none;}

CSS:
<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>

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

.hide {display: none;}

您可以使用来切换隐藏
类
$(".btn").click(function(e) {
    e.preventDefault();
    $("#main-dropdown").toggleClass('hide');
});

工作示例：
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>

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

.hide {display: none;}

CSS:
<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>

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

.hide {display: none;}

感谢您的建议，但我的问题仍然存在。在您的示例中，我单击“显示”链接后，它应打开，但如果下拉列表可见，则应隐藏。感谢您的建议，但我的问题仍然存在。在您的示例中，我单击“显示”链接后，它应打开，但如果下拉列表可见，则应隐藏。