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

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

Answer 1

这是一个相当普遍且可能很棘手的问题。您希望绑定到任何外部点击的内容。你的元素，但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()。此调用停止事件继续冒泡到文档的根目录。

回想一下，文档上的点击绑定将捕获所有点击，并且任何未在侧面菜单元素内发出的点击将调用该函数来关闭它。因此，如果您有一个在外面的元素而您不希望该元素触发您的sidemenu关闭，则需要停止该元素的点击传播。在这种情况下，这就是我对小提琴上的菜单按钮的所作所为。

希望这有帮助！

Answer 2

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

当焦点事件或其中的任何元素失去焦点时，会将焦点事件发送到元素。这与模糊事件不同，因为它支持检测后代元素的焦点丢失（换句话说，它支持事件冒泡）。

示例：

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

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

当我靠近它外面的任何地方关闭侧面板

2 个答案: