jQuery菜单（显示 - 隐藏）有时需要2次点击

Question

我有一个简单的菜单，点击显示子菜单
它无法正常工作。有时它很好，但大部分时间特别是点击身体后，菜单需要2点击才能显示。

jsfiddle

＆＃13;

＆＃13;

$(document).ready(function() {
  $("div[data-toggle]").click(function() {
    var selector = $(this).data("toggle");
    var X = $(selector).attr('id');
    if (X == 1) {
      $(selector).hide();
      $(selector).attr('id', '0');
      $(this).removeClass('active');
    } else {
      $(selector).show();
      $(selector).attr('id', '1');
      $(this).addClass('active');
    }
  });

  //Mouse click on sub menu
  $(".dMenu").mouseup(function() {
    return false;
  });
  $(".dMenu").click(function() {
    return false;
  });
  //Document Click
  $(document).mouseup(function() {
    $(".dMenu").hide();
    $("div[data-toggle]").attr('id', '');
    $("div[data-toggle]").removeClass('active');
  });
});

＆＃13;

#main {
  width: 100%;
  height: 200px;
  border: 1px solid #1183D5;
  text-align: center;
}
#all {
  width: 300px;
  height: 50px;
  border: 1px solid #C6C6C6;
}
.menu {
  width: 60px;
  height: 40px;
  float: left;
  border: 1px solid #000;
  background: #539CF4;
  position: relative;
  margin-left: 1em;
  cursor: pointer;
}
.dMenu {
  width: 60px;
  height: 100px;
  background: #CCCDEC;
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main">
  <div id="all">
    <div class="menu usrFirst" data-toggle=".firstMenu">menu1
      <div class="firstMenu dMenu">first</div>
    </div>
    <div class="menu usrSecond" data-toggle=".secondMenu">menu2
      <div class="secondMenu dMenu">second</div>
    </div>
    <div class="menu usrThird" data-toggle=".thirdMenu">menu3
      <div class="thirdMenu dMenu">third</div>
    </div>
  </div>
  <br>
  <br>
  <br>main page (click here to hide all sub-menus, then click on menus again)
</div>

＆＃13;

＆＃13;

＆＃13;

解决方案：我没有停止传播，而是使用了这种方法：jsfiddle

Answer 1

当您通过单击文档关闭所有子菜单时，您不会更改子菜单的ID。您清除菜单按钮的ID，但他们没有ID。 $("div[data-toggle]").attr('id', '')应为$(".dMenu").attr('id', '')。

但是这种方式使用ID作为标志是糟糕的设计。您还要创建重复的ID，但它们应该是唯一的。您应该使用.data()存储它。

另一个问题是，当您单击菜单按钮时，它还会首先将mouseup事件发送到文档。因此事件处理程序正在清除所有active标志。对此的修复是在那里使用click处理程序，并将e.stopPropagation放在按钮的单击处理程序中，以防止点击冒泡到文档。

＆＃13;

＆＃13;

$(document).ready(function() {
  $("div[data-toggle]").click(function(e) {
    e.stopPropagation();
    var selector = $(this).data("toggle");
    var X = $(selector).data('active');
    if (X == 1) {
      $(selector).hide().data('active', 0);
      $(this).removeClass('active');
    } else {
      $(selector).show().data('active', 1);
      $(this).addClass('active');
    }
  });

  //Mouse click on sub menu
  $(".dMenu").mouseup(function() {
    return false;
  });
  $(".dMenu").click(function() {
    return false;
  });
  //Document Click
  $(document).click(function() {
    $(".dMenu").hide().data('active', 0);
    $("div[data-toggle]").removeClass('active');
  });
});

＆＃13;

#main {
  width: 100%;
  height: 200px;
  border: 1px solid #1183D5;
  text-align: center;
}
#all {
  width: 300px;
  height: 50px;
  border: 1px solid #C6C6C6;
}
.menu {
  width: 60px;
  height: 40px;
  float: left;
  border: 1px solid #000;
  background: #539CF4;
  position: relative;
  margin-left: 1em;
  cursor: pointer;
}
.dMenu {
  width: 60px;
  height: 100px;
  background: #CCCDEC;
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="main">
  <div id="all">
    <div class="menu usrFirst" data-toggle=".firstMenu">menu1
      <div class="firstMenu dMenu">first</div>
    </div>
    <div class="menu usrSecond" data-toggle=".secondMenu">menu2
      <div class="secondMenu dMenu">second</div>
    </div>
    <div class="menu usrThird" data-toggle=".thirdMenu">menu3
      <div class="thirdMenu dMenu">third</div>
    </div>
  </div>
  <br>
  <br>
  <br>main page (click here to hide all sub-menus, then click on menus again)
</div>

＆＃13;

＆＃13;

＆＃13;