如何檢查目標是否從元素中刪除或不在jQuery中？

Question

$(document).ready(function() { 
 
    $(".dropdown-toggle").click(function(event) { 
 
    var target = $(event.target); 
 
    if (target.is(this)) { 
 
     $(this).find(".caret").toggleClass("customcaret"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="dropdown-toggle"> 
 
<div class="caret"></div> 
 
</div>

此代碼工作正常，當我點擊.dropdown-toogle，.caret受着（類正在改變）是內.dropdown-toogle。

但是現在我想從.caret開關.customcaret類，如果我在'.dropdown-toggle'之外單擊。

Answer 1

你必須要像你的腳本修改：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="dropdown-toggle" style="float:left;"> 
    <div class="caret">Click Here</div> 
</div> 

SCRIPT

$(document).ready(function() { 
    $(".dropdown-toggle").click(function(event) { 
     event.stopPropagation(); 
     $(this).find(".caret").addClass("customcaret"); 
    }); 
    $("body").click(function() { 
     if($(".dropdown-toggle").find(".caret").hasClass("customcaret")){ 
      $(".dropdown-toggle").find(".caret").removeClass("customcaret"); 
     } 
    }); 
}); 

Answer 2

您可以在身體上點擊事件，從您的元素中移除類「customcaret」。