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();
 }
});

Answer 2

未经测试，但查看您的代码，这可能会起作用。这个想法是在页面的主体上有一个事件处理程序，当它触发时，它会检查以确保您没有单击任何js-opened的子级，并使用js-opened类关闭该元素。

  $(document).ready(function(){
    $("body").click(function(event) {
     if ($(event.target).parents('div').hasClass("js-opened") === false){
        console.log('closed menu');
        $('.js-opened').slideUp("slow", "easeOutExpo").removeClass("js-opened");          
       }      
    });
  });

Answer 3

   var $menu = $('.main-nav');

    $('mobile_nav').click(function () {
      $menu.toggle();
    });

    $(document).mouseup(function (e) {
       if (!$menu.is(e.target) // if the target of the click isn't the container...
       && $menu.has(e.target).length === 0) // ... nor a descendant of the container
       {
                    desktop_nav.slideUp("slow", "easeOutExpo").removeClass("js-opened");
                    $(this).removeClass("active");
      }
     });

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

3 个答案: