CODEWITHSUNDEEP
jquerytwitter-bootstrap
Szekely Jonathan
Szekely Jonathan

Reputation: 137

stopping stopPropagation?

Thing is, i have 2 menus that initially opened and closed with a click. However they were required to also close if the click was anywhere on the page so i used the stopPropagation function. The problem is, the function obviously stops me from accesing menus inside those menus (menuception!). I tried some extra conditions but to no avail. What's your take on this? This is one of my attempts

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

I am using Bootstrap 3 (the collapse functions are from that)

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

Upvotes: 1

Views: 127

Answers (1)

Well Wisher
Well Wisher

Reputation: 1875

i understand stand that you need to close the menu when on body click the following code will help you

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

The above code will hide the container div on body click,and will not hide container on clicked element

thanks

Upvotes: 1

Related Questions