Question

这是我的html和jquery代码，如何点击任何地方关闭此菜单？我使用fadeout但这不起作用，当它在时间打开时，我想要点击它关闭的任何地方。

<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>

如何关闭菜单白色jquery

1 个答案: