javascript - 想要通过在菜单元素外部单击来隐藏菜单

Question

我想通过点击网络的任何部分来隐藏我的菜单，而不是这里的菜单按钮是de js:

mobile_nav.click(function(){

        if (desktop_nav.hasClass("js-opened")) {
            desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
            $(this).removeClass("active");
        }
        else {
            desktop_nav.slideDown("slow", "easeOutQuart").addClass("js-opened");
            $(this).addClass("active");

            // Fix for responsive menu
            if ($(".main-nav").hasClass("not-top")){
                $(window).scrollTo(".main-nav", "slow"); 
            }

        }

    });

和 HTML

                <div class="inner-nav desktop-nav">
                    <ul class="clearlist scroll-nav local-scroll">
                        <li class="active"><a href="index.html" style="font-weight: bold;">Home</a></li>
                        <li><a href="help.html" style="font-weight: bold;">Who we help</a></li>
                        <li>
                            <a href="#" class="mn-has-sub" style="font-weight: bold;">Services <i class="fa fa-angle-down"></i></a>

                           <!-- Sub -->
                            <ul class="mn-sub to-left" style="background: white !important;">

                                <li>
                                    <a href="recovery.html" style="text-transform: uppercase; font-weight: bold;">Recovery Coaching</a>

                                </li>
                                <li>
                                    <a href="non-addict.html" style="text-transform: uppercase; font-weight: bold;">Coaching and Support for Loved Ones</a>
                                </li>
                                <li>
                                    <a href="couples.html" style="text-transform: uppercase; font-weight: bold;">Family and Couples Coaching</a>
                                </li>
                                <li>
                                    <a href="interventions.html" style="text-transform: uppercase; font-weight: bold;">Interventions</a>
                                </li>
                                <li>
                                    <a href="liferecovery.html" style="text-transform: uppercase; font-weight: bold;">LIFE COACHING IN RECOVERY</a>
                                </li>
                                <li>
                                    <a href="divorce.html" style="text-transform: uppercase; font-weight: bold;">Separation and Divorce Coaching</a>
                                </li>
                                <li>
                                    <a href="therapy.html" style="text-transform: uppercase; font-weight: bold;">Therapy</a>
                                </li>

                            </ul>
                            <!-- End Sub -->

                        </li>
                        <li><a href="about.html" style="font-weight: bold;">About us</a></li>
                        <li><a href="#contact" style="font-weight: bold;">WORK WITH US</a></li>
                        <li><a href="faq.html" style="font-weight: bold;">FAQ</a></li>
                        <li><a href="blog.html" style="font-weight: bold;">Blog</a></li>

                    </ul>
                </div>

我想要一个可以放入那个 js 的简单代码，因为我试图在索引中放入 head 标记，但它不起作用，有什么想法吗？我也有 CSS，但我认为此时它不相关，该站点是: http://www.familyaddictionspecialist.com/test/

Answer 1

这是你想要的吗？

var thatMenu = $('.thatMenu');

$(document).mouseup(function (e) {
 if (!thatMenu.is(e.target) && thatMenu.has(e.target).length === 0) {
  thatMenu.hide();
 }
});