javascript - 使用 jquery 隐藏我的菜单

Question

我有以下 Bootstrap html 菜单:

<ul class="nav navbar-top-links navbar-right">
  <li class="dropdown menustatus">
    <a class="dropdown-toggle" href="#">
      <div class="busy-status"></div>
      <div class="online-status" style="display:none;"></div>
    </a>
    <ul class="dropdown-menu dropdown-user" style="margin-top: 10px;">
      <li class="status">
        <a href="http://localhost:3000/status/online" data-remote="true" id="online-status" style="color:#4b3087;"><i class="fa fa-circle online"></i> Online</a>
      </li>
      <li class="status">
        <a href="http://localhost:3000/status/busy" data-remote="true" id="busy-status" style="color:#4b3087;"><i class="fa fa-circle busy"></i> Busy</a>
      </li>
    </ul>
  </li>
</ul>

我试图在用户点击任何元素时隐藏菜单，如下所示:

$("#online-status").click(function (){
  $(".busy-status").hide();
  $(".online-status").show();
  $("li.dropdown.menustatus.open").removeClass("open");
});

$("#busy-status").click(function (){
  $(".online-status").hide();
  $(".busy-status").show();
  $("li.dropdown.menustatus.open").removeClass("open");
});

但它不起作用。

我也试过:

$(".dropdown.menustatus.open").removeClass("open");

或

$("dropdown.menustatus").removeClass("open");

或

$(".menustatus").removeClass("open");

或

$(".open").removeClass("open");

但我无法隐藏菜单。

我做错了什么。

谢谢你的帮助

Answer 1

#online-status 是一个 anchor 。

尝试:

$("#online-status").click(function(e){
  e.preventDefault();
   ....

});