DEMO

Question

我有以下下拉菜单

<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");
});

但是我无法隐藏下拉列表。

请提出任何想法或建议。

Answer 1

试试这个：

DEMO

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


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

Answer 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

单击项目上的hide bootstrap下拉菜单

2 个答案:

DEMO