如何关闭菜单白色 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();" 的信息，请参阅 link 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>

如何关闭菜单白色 jquery

how to close menu white jquery

jquery