当按钮位于标题中时在 div 外部单击时切换菜单

Question

我试图隐藏我的 offcanvas 菜单，同时我在菜单所在的 div 外部单击。 这是一个仅在加载引导 xs 类时出现的菜单。

我的按钮在我的标题内，菜单是他自己的一个页面。

这是我的按钮的样子：

<p class="pull-left visible-xs">
<?php if($data['title'] == 'Producten' || $data['title'] == 'Winkeltjes' || $data['title'] == 'Home'){?>
    <button type="button" onClick="document.getElementById('sidebar').scrollIntoView();" 
    class="btn btn-primary btn-default" data-toggle="offcanvas">
        Filters
    </button>
<?php }
</p>

我在 stackoverflow 上找到了几种方法并尝试了这些方法，但这些方法都没有使用我的 offcanvas div 进行锻炼。应该打开的 div 具有以下类和 id：

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">

我现在没有任何功能了。

希望我已经给你们足够的信息，我期待着任何回复。

Answer 1

使用此代码..

$(document).click(function (e) {
        if (
            !$(e.target).hasClass('menuClass') &&
            !$(e.target).hasClass('') &&
            $(e.target).parents('.buttonClass').length == 0 &&
            $(e.target).parents('.menuClass').length == 0
            ) {
                $(".menuClass").hide();
                $(".buttonClass").removeClass("acctive");
        }
    });

Answer 2

试试这个代码...

function hideWhenClickedElseWhere(container, callback){
        $(document).mouseup(function (e){
            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
            {
                callback();
            }
        });
    }

第一个参数是您不想在单击时关闭菜单的节点。 第二个参数是回调——如果在其他地方点击了我们应该怎么做。

hideWhenClickedElseWhere( $(".buttonClass, .menuClass") ), function(){
   $(".menuClass").hide();
   $(".buttonClass").removeClass("acctive");
});