getting around stopPropagation()

Question

Once upon a time, a frond end dev had some menus he wanted to close when somebody clicked outside them anywhere on the page, so he used some ifs and the method mentioned to handle he job. Of course later this came back to bite him in the ass, because the clicks made inside the mentioned menus would not take effect. How do i get around that? Or how could i differently handle this? I am using bootstrap 3 if that is of some help

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

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

And no event.stopPropagation needed.