javascript - mouseup 出现意外行为

Question

当我点击菜单时，菜单会显示，但是当指针从菜单上移开时，它会在 2-5 秒后隐藏。

我希望菜单在单击时切换，并在单击页面上的其他任何位置时显式隐藏，如 this demo. 所示。 this fiddle我的代码如下:

$(document).ready(function() {
  $(".MyAccount").click(function() {
    var X = $(this).attr('id');
    if (X == 1) {
      $(".submenu").hide();
      $(this).attr('id', '0');
    } else {
      $(".submenu").show();
      $(this).attr('id', '1');
    }
  });
  //Mouseup textarea false
  $(".submenu").mouseup(function() {
    return false
  });
  $(".myaccount").mouseup(function() {
    return false
  });
  //Textarea without editing.
  $(document).mouseup(function() {
    $(".submenu").hide();
    $(".MyAccount").attr('id', '');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="MyAllMenu" style='margin: 50px'>
  <div class="MyMenu">
    <a class="MyAccount">
      <span>My Settings</span>
    </a>
    <div class="submenu" style="display: none;">
      <ul class="AllMenuList">
        <li>
          <a href="/Default.aspx">Dashboard</a>
        </li>
        <li>
          <a href="#Profile">Profile</a>
        </li>
        <li>
          <a href="#settings">Settings</a>
        </li>
        <li>
          <a href="#feedback">Send Feedback</a>
        </li>
        <li>
          <a href="#signout">Sign Out</a>
        </li>
      </ul>
    </div>
  </div>

</div>

Answer 1

检查FIDDLE 。 onclick 隐藏/显示菜单现在工作。我已将 not(".myaccount",".submenu") 添加到文档的鼠标弹起事件中。

$(document).ready(function() {
    $(".MyAccount").click(function () {

        var X = $(this).attr('id');
        if (X == '1') {
            $(".submenu").hide();
            $(this).attr('id', '0');
        }
        else {
            $(".submenu").show();
            $(this).attr('id', '1');
        }
    });

    //Textarea without editing.
    $(document).not(".myaccount",".submenu").mouseup(function () {
        $(".submenu").hide();
        $(".MyAccount").attr('id', '');
    });
 });