Question

我有一种情况，当我点击里程碑链接时，它取消隐藏一个带有里程碑作为标题的下拉div。

我的要求是当我在任何地方点击该div时它不应该隐藏。当我点击div之外时它应该隐藏起来。目前的问题是，当我点击内部时，它会隐藏。以下是图片链接仅供参考。 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>

Answer 1

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

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尝试删除单个类，因为它会删除该元素上的所有类。

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

1 个答案: