阻止stopPropagation？

Question

问题是，我有两个菜单，最初打开和关闭的点击。但是，如果单击位于页面上的任何位置，则它们也必须关闭，因此我使用了stopPropagation函数。问题是，这个函数显然阻止我访问那些菜单中的菜单(menuception!)。我尝试了一些额外的条件，但没有结果。你对此有何看法？这是我的尝试之一

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

    if ($("#search").hasClass("in")) {
        if (!$("#search .drop-down").is(":hover")){
            $("#search").collapse('hide');
        }        
    }
});

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

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

我使用的是Bootstrap 3(折叠函数来自于此)

    <div id="nav-shop" class="panel-collapse collapse">
        <div class="container">
            <div class="row">
                <div class="col-sm-6 col-md-9 col-xs-12">
                    <div class="items">
                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>

                        <div class="item">
                            <div class="image pull-left">
                                <img class="img-responsive" alt="a" src="images/product.png">
                            </div>

                            <div class="text pull-left">
                                <p>Lorem Ipsum Dolor consecteur </p>
                                <p>$79/QUANTITY: 1</p>
                                <h6 class="main-text-color"><a href="#">Clear</a> <i class="fa fa-times-circle-o"></i></h6>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-sm-6 col-md-3 col-xs-12 cart">
                    <h4>CART SUBTOTAL <span class="medium"> $158 </span></h4>
                    <div class="sep"></div>
                    <a class="button striped md blue">view cart</a>
                    <a class="button solid md blue"><div class="over">proceed to checkout</div></a>
                </div>

            </div>
        </div>
    </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>

Answer 1

我知道你需要关闭菜单，当你在身体上点击下面的代码将帮助你

 $(document).mouseup(function (e){
    var container = $('container Div');
    var click_button =  $('Clicked element');
    if(!container.is(e.target) && container.has(e.target).length === 0&&!click_button.is(e.target)){
    $(container).css("display","none");
    }
 }

以上代码将在body单击时隐藏容器div，而不会在单击元素上隐藏容器。

谢谢