Question

事情是，我有2个菜单，最初打开和关闭点击。但是，如果点击位于页面的任何位置，他们也需要关闭，所以我使用了stopPropagation函数。问题是，该功能显然阻止我访问这些菜单中的菜单（菜单！）。我尝试了一些额外的条件但无济于事。你对此有何看法？这是我的一次尝试

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

以上代码将隐藏正文单击时的容器div，并且不会隐藏单击元素上的容器

谢谢

停止停止传播？

1 个答案: