Question

曾几何时，当有人在页面的任何地方点击它们之外时，他们想要关闭一些菜单，所以他使用了一些ifs和提到的方法来处理他的工作。当然后来这回来咬他的屁股，因为在所提到的菜单内点击不会生效。我该如何解决这个问题？或者我怎么能不同地处理这个？我正在使用bootstrap 3，如果这有一些帮助

HTML

<div class="shopbar pull-right">
    <a data-toggle="collapse" href="#nav-shop" class="collapsed"> <i class="fa fa-lg fa-shopping-cart"></i> </a>
    <a data-toggle="collapse" href="#search" class="collapsed"> <i class="fa fa-lg fa-search"></i> </a>
</div>

...

    <div id="search" class="panel-collapse collapse">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Search In <span class="caret down"></span><span class="caret up"></span></button>
                            <ul class="dropdown-menu">
                                <li><a href="#">Blog</a></li>
                                <li><a href="#">Portfolio</a></li>
                                <li><a href="#">Events</a></li>
                                <li><a href="#">Shop</a></li>
                                <li><a href="#">Pages</a></li>
                            </ul>
                        </div><!-- /btn-group -->
                        <input type="text" class="form-control">
                        <span class="input-group-btn">
                            <button class="btn btn-default fa fa-search" type="button"></button>
                        </span>
                    </div><!-- /input-group -->
                </div>
            </div>
        </div>
    </div>

Jquery

$('html').click(function () {
    $(".shopbar a").addClass("collapsed");
    if ($("#nav-shop").hasClass("in")) {
        $("#nav-shop").collapse('hide');
    }

    if ($("#search").hasClass("in")) {
        $("#search").collapse('hide');
    }
});

$("#nav-shop").click(function (event) {
    event.stopPropagation();
    return true;
});

$("#search").click(function (event) {
    event.stopPropagation();
    return true;
});

Answer 1

$('html').click(function (event) {

    var target = $(event.target);

    if(!target.is("#nav-shop") && !target.is("#search") ) {
        $(".shopbar a").addClass("collapsed");

        if ($("#nav-shop").hasClass("in")) {
            $("#nav-shop").collapse('hide');
        }

        if ($("#search").hasClass("in")) {
            $("#search").collapse('hide');
        }
    }
});

不需要event.stopPropagation。

绕过stopPropagation（）

1 个答案: