下拉列表问题

Drop down list issue

本文关键字：问题 下拉列表      更新时间：2023-09-26

>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）时，会出现一个下拉菜单，但是当我再次单击该按钮时，应该隐藏这没有发生。我做错了哪里。

更改

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

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

$(".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;
 });

类似的东西？

你真的应该使用 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>
您可以使用

toggleClass 来切换该hide类

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

JQUERY：

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

.CSS：

.hide {display: none;}
相关文章：