Question

当我点击它外面时，我想隐藏我的菜单。我尝试了很多东西，但我必须做错事，而且我对Javascript的了解太少，无法解决这个问题。

这是Html

<header id="header">
            <div id="showLeftPush">
                <div class="toggle">
                  <div class="one"></div>
                  <div class="two"></div>
                  <div class="three"></div>
                </div>
            </div>
            <img src="img/LOGO_HCS.svg" alt="Logo Here Comes the Sun">
        </header>
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left"     id="cbp-spmenu-s1">
            <img class="scrollTo" href="#header"  src="img/LOGO_HCS_WHITE.svg" alt="logo here comes the sun">
            <a class="scrollTo" href="#apropos">ABOUT</a>
            <a class="scrollTo" href="#finishing">FINISHES</a>
            <a class="scrollTo" href="#news">NEWS</a>
            <a class="scrollTo" href="#contact">CONTACT</a>
            <div class="trait"></div>
            <a class="secondBloc" href="http://www.lampegras.fr/"><b>LAMPE GRAS</b></a>
            <a class="secondBloc" href="http://www.schottlander.fr/"><b>LAMPE MANTIS</b></a>
            <a class="secondBloc" href="http://www.inthetube.fr/"><b>LAMPE IN THE TUBE</b></a>
            <a class="secondBloc" href="http://www.surpil.fr/"><b>CHAISE SURPIL</b></a><br/>
            <a class="secondBloc" href="http://www.dcwe.fr/"><b>by<br/>DCW éditions</b></a>
            <div class="trait"></div>
            <a class="secondBloc" href="https://www.facebook.com/lampegras"><b>Facebook</b></a>
            <a class="secondBloc" href="https://fr.pinterest.com/collectivea/dcw-editions/"><b>Pinterest</b></a><br><br>
            <a class="langue" id="en" href="index.html">En</a>
            <a class="langue" href="index_fr.html">Fr</a>
        </nav>

这是脚本

 <script>
        var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
            showLeftPush = document.getElementById( 'showLeftPush' ),
            body = document.body;
         showLeftPush.onclick = function() {
            classie.toggle( this, 'active' );
            classie.toggle( body, 'cbp-spmenu-push-toright' );
            classie.toggle( menuLeft, 'cbp-spmenu-open' );
            disableOther( 'showLeftPush' );
        };
        function disableOther( button ) {

            if( button !== 'showLeftPush' ) {
                classie.toggle( showLeftPush, 'disabled' );
            }   
        }
    </script>

非常感谢你的帮助！

Answer 1

这样的事情怎么样？

$(document).mouseup(function (e){
    var container = $("#your-menu-div"); //Your menu div
    var container1 = $("#your-menu-icon"); //Your menu icon

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0 // ... nor a descendant of the container
        &&!container1.is(e.target) // if the target of the click isn't the container...
        && container1.has(e.target).length === 0 // ... nor a descendant of the container
    ){
        container.hide();
    }
});

Answer 2

为什么不使用css？通过谷歌下拉css你会发现许多样本隐藏和显示每个CSS。你不会使用下拉菜单，但在那个时候，你会找到一些想法来处理。你可以使用鼠标悬停或其他不错的功能

单击外部时隐藏菜单

2 个答案: