无法在 onclick 事件的特定情况下操作 jQuery

Not able to manipulate jQuery on particular situation in onclick event

我有一种情况,当我点击里程碑 link 时,它会取消隐藏一个以里程碑为标题的下拉菜单 div。

我的要求是,当我在 div 任何不应隐藏的地方单击时。当我仅在 div 之外单击时,它应该会隐藏起来。 当前的问题是当我在 div 内部单击时它会隐藏。 这是图像的 link 仅供参考。 https://drive.google.com/file/d/0B0zHBJb86qsIUFpWMm1ra3dfc1k/view

$("#headermile").on({//task list in header
  focus:function(){
      $('#mileheader').attr("class", "");
  }, 
  blur:function(){    

    $('#mileheader').click(function (e) {
      if (e.target.id == 'mileheader') {
        $("#mileheader").attr("class","");
      } else {
        $("#mileheader").attr("class","hide");
      }

  });
<li class="has-dropdown">
  <a id="headermile" href="#">Milestones </a>
  <div id="mileheader" class="hide">
    <ul class="dropdown settings">
    </ul>
  </div>
</li>

不要认为这个答案是完美的,只是想找到一个快速的解决方案。

http://jsfiddle.net/troythompson/eLz7ptwf/

jQuery(document).ready(function($) {

    $('#headermile').click(function(event) {
        event.preventDefault();
        $("#mileheader").removeClass("hide");
    });

    $(document).on('click', function(event) {
        var container = $("#mileheader");
        var button = $("#headermile");
        if (!container.is(event.target) && container.has(event.target).length === 0 && !button.is(event.target)) {
            $("#mileheader").addClass("hide");
        }
    });
});

资源:Use jQuery to hide a DIV when the user clicks outside of it

同样,我不使用 .attr 来尝试删除单个 class,因为它会删除该元素上的所有 classes。