скрыть меню начальной загрузки выпадающего по пункту щелкает

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").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