单击项目上的隐藏引导下拉菜单

Posted 2023-05-09

【中文标题】单击项目上的隐藏引导下拉菜单

【英文标题】：hide bootstrap dropdown menu on item is clicked

【发布时间】：2014-10-26 12:49:24

【问题描述】：

我有以下下拉菜单

<li class="dropdown menustatus open" id="user-status">
  <a class="dropdown-toggle" href="#">
    <div class="online-status" style="display: none;"></div>
    <div class="busy-status" style=""></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>

当用户像这样点击#online-status 或#busy-status 时，我正在尝试删除“open”类：

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


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

我也试过这种方式：

$("#busy-status").click(function ()
  $( "li.dropdown.menustatus" ).find( "open" ).removeClass("open");
);

$("#online-status").click(function ()
  $( "li.dropdown.menustatus" ).find( "open" ).removeClass("open");
);

但我无法隐藏下拉菜单。

请有任何想法或建议。

【参考方案1】：

试试这个：

DEMO

 $("#online-status").click(function () 
            $("#user-status").removeClass("open");
        );


        $("#busy-status").click(function () 
            $("#user-status").removeClass("open");
        );

【参考方案2】：

输入preventDefault() 停止默认行为：

$("#online-status").click(function (e)
     e.preventDefault();
    $(".busy-status").hide();
    $(".online-status").show();
    $("li.open").removeClass("open");
  );


  $("#busy-status").click(function (e)
      e.preventDefault();
    $(".online-status").hide();
    $(".busy-status").show();
    $("li.open").removeClass("open");
  );

WORKING FIDDLE