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是一个锚。

尝试：

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

});

Answer 2

检查点击事件中其他元素的处理方式：如果需要，您可以以类似的方式使用.hide()和.show()，甚至.toggle()。

$(".menustatus").hide();

选择器的具体程度取决于你决定/找出。

如果你绝对想要以＆＃34;类的方式做到这一点，我的猜测是你的＆＃34; .open＆＃34; class将可见性或显示属性设置为visible / block或类似的东西以显示元素，但是你的＆＃34; .menustatus＆＃34;似乎没有隐藏它。我的意思是：如果从元素中删除.open类，则没有任何内容指定是否应该隐藏它。试试这个：

.menustatus {
    display: none;
}

.menustatus.open {
    display: block; // Add !important if needed.
}

更改＆＃34;阻止＆＃34;无论你想要什么，只要它不是 none 。

使用jquery隐藏我的菜单

2 个答案: