使用jquery隐藏我的菜单

Hide my menu using jquery

本文关键字：菜单 我的 隐藏 jquery 使用      更新时间：2023-09-26

我有以下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");

但是我无法隐藏菜单。

我做错了什么。

谢谢你的帮助

#online-status是一个锚

试题:

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

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

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

选择器需要有多具体取决于你来决定/找出。

如果你绝对想用"类的方式"来做，我猜是你的"。类设置可见性或显示属性为可见/块或类似的东西来显示元素，但你的"。菜单状态"似乎并没有隐藏它。我的意思是:如果从元素中删除.open类，则没有指定是否应该隐藏它。试试这个:

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

把"block"改成任何你想要的，只要不是none

相关文章：