单击切换项目后，保持Twitter Bootstrap下拉菜单保持打开状态

Question

我尝试在点击切换项目时保持下拉菜单保持打开状态。我成功地保持下拉菜单打开，但我的切换项目无法正常工作。我第一次点击切换项时，它会执行它想要做的事情，但是第二次单击它时，它将不会切换，直到我关闭下拉菜单。有人可以给我一些指示吗？

HTML:
<div class="span2">
  <div class="dropdown sort_main">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Sort by: </a>
    <span>Rating</span>
    <ul class="dropdown-menu sort" role="menu" aria-labelledby="dLabel">
       <li><a id="ratings" href="#">Option1</a></li>
       <li><a id="timezone" href="#">>Option2</a></li>
       <li><a id="level" href="#">>Option3</a></li>
    </ul>
  </div>
</div>

<script>        
$("a#ratings").click(function(){
  $(this).toggleClass("option_selected");  //it will not remove this class until i close menu and open it again
});

$('.dropdown-menu a#ratings').click(function(e) {
  e.stopPropagation();
});
</script>