javascript - 当我在它外面的任何地方关闭时关闭侧面板

Question

我有左面板，当我按下菜单按钮时它会滑入(这是一个移动版本)。当左侧面板滑入时，我希望它在我单击左侧面板本身以外的任何其他地方时关闭。我做的jquery是这样的:

$(document).ready(function(){
        $('.menu').click( function() {

    if ($('.sidemenuu').hasClass('hidden')) {
       $('.sidemenuu').animate({left:"0%"},255);
    $('.sidemenuu').removeClass('hidden');
    return true;
    }
    else {
    if($('.sidemenuu').css("left","0")){
                alert('jkk');
                $('html').click(function() {
        $('.sidemenuu').animate({left:"-80%"},255);
    });
        }

        $('.sidemenuu').addClass('hidden');
        $('.sidemenuu').animate({left:"-80%"},255);

    }
});

$('.close').click(function(){

        $('.sidemenuu').animate({left:"-80%"},255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');
            });

            $('.sidemenuu').click(function(e){


            });

        });

html:

<div class="sidemenuu hidden">

<div class="close"></div>
    <div class="over-y-auto">   
    <div data-role="content">   

            <div id="getVerificationSearchList" >    

                <button  onClick="getVerificationSearchList()">Verification Data</button>

            </div>

            <div id="getNewHomeLoan" >    

                <button onClick="getNewHomeLoan()">New Home Loan</button>


            </div>

            <div id="getNewLoan" >    

                <button onClick="getNewLoan()">New Loan</button>


            </div>

            <div id="getContactRecording" >    

                <button onClick="getContactRecording()">Contact Recording</button>

            </div>

            <div id="getCPU" >    

                <button onClick="getCPU()">CPU</button>

            </div>

            <div id="getphotoupload" >    

                <button onClick="getimageupload()">Photo Upload List</button>

            </div>

            <div id="getdocumentupload" >    

                <button onClick="getdocumentupload()">Document Upload List</button>

            </div>


            <div id="getreceiptupload" >    

                <button onClick="getreceiptupload()">Receipt List</button>

            </div>

         </div>
     </div>
</div>

CSS:

 .sidemenuu{   background-color: #181818;
height: 100%; left: -40%;
position: relative;
box-shadow: 9px 0 10px #303030;
position: fixed;
border-right: solid 1px #444;
 padding: 1%;
width: 75%;
left: -80%;

z-index: 10;}

.over-y-auto{ overflow-y: auto; height: 100%;}

.sidemenuu button{ background-color: #141414;
border-bottom: solid 1px #000 !important;
border-left: 0;
border-right: 0;
border-top: solid 1px #171717 !important;
color: #565656;
height: 55px;
width: 98%;
font-size: 18px;
}
.sidemenuu button:hover{ background-color: #202020; box-shadow: 0 0 7px #000 inset;}


.close { background: url("img/close.png") no-repeat scroll center 5px #252525;
border: solid 1px #333;
border-radius: 4px;
cursor: pointer;
height: 40px;
margin: 0 auto 19px;
padding: 0;
width: 73px;
}

.menu{ cursor: pointer;  left: 0;
    position: absolute;}

fiddle 在这里:http://jsfiddle.net/cLJVV/

Answer 1

这是一个相当普遍且可能很棘手的问题。您希望绑定(bind)到元素“外部”的任何点击，但 DOM 事件不会那样工作。每次点击都在某物 内，这就是接收事件并将其冒泡到 DOM 中的东西。

因此，解决此问题的方法是监听对 document 本身的点击，并检查这些点击是否在您要检测的元素内部(您的边栏)。如果点击一直到达文档而没有通过您的元素，则它们在外部。最简单的检查函数如下所示:

var openSidebar = function(){
    $('.sidemenuu').removeClass('hidden').animate({left:"0%"},255);
}
var closeSidebar = function(){
    $('.sidemenuu').addClass('hidden').animate({left:"-80%"},255);
}

$('.menu').click( function(event) {
    event.stopPropagation();
    openSidebar();
});
$(document).click( function(event){
    if ( !$(event.target).closest('.sidemenu').length ) {
        closeSidebar();   
    }
});

请在此处查看更新的 fiddle :http://jsfiddle.net/cLJVV/2/

注意一件非常重要的事情:在.menu click 函数中，第一行调用event.stopPropagation()。此调用阻止事件继续冒泡到文档的根目录。

回想一下，文档上的点击绑定(bind)将捕获所有点击，任何不是在侧边菜单元素内产生的点击都将调用该函数来关闭它。因此，如果您有一个元素在外部并且您不希望该元素触发您的侧边菜单关闭，您需要停止传播对该元素的点击。在这种情况下，这就是我对您的 fiddle 上的菜单按钮所做的。

希望这对您有所帮助!