如何關閉菜單白色jquery

Question

這是我的html和jquery代碼，如何在任何地方單擊時關閉此菜單？ 我使用淡出爲此，但不工作，並在時間打開其關閉時，我想要點擊任何地方它關閉。

<div class="hide-recycle"> 
    <i class="icon-cog"> </i> 
    <div class="hide-recycle-menu"> 
     <div class="top-triangle-hide-recycle"></div> 
     <ul id="setting-hide-recycle"> 
      <li><a href="#"><img src="images/recycle.png" />حذف کردن</a></li> 
      <li><a href="#"><img src="images/hide.png" />پنهان کردن</a></li>             
     </ul> 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".hide-recycle").hover(function(){ 
      $(this).css("color","rgb(90, 90, 90)"); 
     },function(){ 
      $(this).css("color","rgb(146, 146, 146)"); 
     }); 
     $(".hide-recycle").click(function(){ 
      $("#setting-hide-recycle").css("display","block"); 
      $(".top-triangle-hide-recycle").css("display","block"); 
     });  
    }); 
</script> 

Answer 1

將菜單隱藏代碼放在文檔的點擊上。 這裏我們使用「e.stopPropagation（）;」當點擊div時停止父級點擊。

$(".hide-recycle").click(function(e){ 
    $("#setting-hide-recycle").css("display","block"); 
    $(".top-triangle-hide-recycle").css("display","block"); 
    e.stopPropagation(); 

}); 

有關「e.stopPropagation（）」的信息，請參閱鏈接http://api.jquery.com/event.stoppropagation/

請參閱下面的代碼。

$(document).ready(function() { 
 
    $(".hide-recycle").hover(function(){ 
 
     $(this).css("color","rgb(90, 90, 90)"); 
 
    },function(){ 
 
     $(this).css("color","rgb(146, 146, 146)"); 
 
    }); 
 
    $(".hide-recycle").click(function(e){ 
 
     $("#setting-hide-recycle").css("display","block"); 
 
     $(".top-triangle-hide-recycle").css("display","block"); 
 
     e.stopPropagation();  
 
    });  
 
    $(document).on("click",function(){ 
 
     // your close code 
 
     //alert("your close code"); 
 
     $("#setting-hide-recycle").hide(); 
 
     $(".top-triangle-hide-recycle").hide(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="hide-recycle"> 
 
    <i class="icon-cog"> </i> 
 
    <div class="hide-recycle-menu"> 
 
     <div class="top-triangle-hide-recycle"></div> 
 
     <ul id="setting-hide-recycle"> 
 
      <li><a href="#"><img src="images/recycle.png" />حذف کردن</a></li> 
 
      <li><a href="#"><img src="images/hide.png" />پنهان کردن</a></li>             
 
     </ul> 
 
    </div> 
 
</div>