Question

当我在菜单所在的div外点击时，我试图隐藏我的 offcanvas 菜单。这是一个仅在加载bootstrap 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

试用此代码......

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

Answer 2

使用此代码。

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

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

2 个答案: