当我关闭外面任何地方时，可以关闭侧板

Side panel to close when I close anywhere outside it

本文关键字：任何地 外面 方时      更新时间：2023-09-26

当我按下菜单按钮时，我有左侧滑动面板(这是一个移动版本)。当左面板滑动进来时，我希望当我点击除了左面板本身以外的任何地方时，它会关闭。我做的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;}

小提琴在这里:http://jsfiddle.net/cLJVV/

这是一个相当常见且可能很棘手的问题。你想绑定到任何点击"外部"的元素，但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();   
    }
});

查看更新的小提琴在这里:http://jsfiddle.net/cLJVV/2/

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

回想一下，文档上的click绑定将捕获所有的单击，并且任何不是来自侧边菜单元素的单击将调用该函数来关闭它。所以，如果你有一个外部元素，而你不希望元素触发侧边菜单关闭，你需要停止在该元素上的点击传播。在这个例子中，这就是我对你小提琴上的菜单按钮所做的。

希望这对你有帮助!

为什么不使用focusout事件处理程序

focusout事件被发送给一个元素，当它或它里面的任何元素失去焦点时。这与blur事件的不同之处在于，它支持检测对后代元素的焦点丢失(换句话说，它支持事件冒泡)。

例子: 

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

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

你也可以为它们使用一个单独的函数，因为它们做同样的事情。

例子:

$('.close').on( "click", closeSidemenu )
$('.sidemenuu').on( "focusout", closeSidemenu )
function closeSidemenu() {
        $('.sidemenuu').animate({
            left: "-80%"
        }, 255).addClass('hidden');
        //$('.sidemenuu').addClass('hidden');
}

两种方法都是有效的，但是第二种方法更容易维护，需要更少的代码，并且更容易排除故障。

相关文章：