javascript - 单击图标两次不关闭下拉菜单

Question

我要疯了。

我有一个搜索图标。如果用户单击它，则会打开一个下拉菜单。如果他/她在元素外部单击，则会关闭下拉列表。我的问题是，如果用户再次单击该图标，我想将其关闭，但这部分不起作用。我想问题出在 event.stopPropagation。

我有以下js代码:

$('.mobile-search').on('click', function(event){
                $('.oe_searchview').show().css('margin-bottom', '15px');
                if ($('.oe-right-toolbar').length) {
                        viewOptions.hide();
                    }
                event.preventDefault();
                event.stopPropagation() // stops bubbling
                // hide search if user clicks outside of the search button
                $('html').on('click.search', function (ev) {
                if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
                    $('html').off('click.search');
                    searchField.hide();
                } else if ($(ev.target).parents('.mobile-search').length) {
                    searchField.hide();
                }
                }); 
            });

HTML代码是:

<div class="col-md-4 col-sm-6 col-xs-12 active-app-title">
   <h2 class="hidden-xs">OPPORTUNITIES</h2>
   <div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Create</div> </div>
   <span>or</span>
   <div class="btn btn-primary"><div class="ripple" style="width: 100%; height=100%;">Add new column</div></div>
   <div class="mobile-search">
   <a href=""><img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/></a>
   </div>
   <div class="mobile-views">
       <a class="flaticon-pause45" href="#"></a>
   </div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 search">
   <div class="oe_searchview form-control input-sm active">
       <div class="oe_searchview_search" title="Search Again">
          <img src="/website/static/src/img/search-icon.png" alt="Search Again" class="search-icon"/>
       </div>
       <div class="oe_searchview_facets">
          <div class="oe_searchview_input" contenteditable="true" tabindex="0"></div>
       </div>
       <div class="oe_searchview_unfold_drawer" title="Advanced Search...">
          <img src="/website/static/src/img/arrow-down.png" alt="Search Again" class="arrow-down-icon"/>
       </div>
   </div>
   <div class="oe-search-options btn-group">
       <div class="btn-group btn-group-sm">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Filters</button>
       </div>
       <div class="btn-group btn-group-sm oe-groupby-menu">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Group By</button>
       </div>
       <div class="btn-group btn-group-sm">
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Favorites</button>
       </div>
   </div>
   <div class="oe-right-toolbar">
       <div class="oe-view-manager-switch btn-group btn-group-sm">
           <span class="flaticon-pause45"></span>
           <span class="flaticon-list91"></span>
           <span class="flaticon-statistical"></span>
           <span class="flaticon-calendar160"></span>
       </div>
   </div>
</div>

我是 js 的新手，所以我们将不胜感激。

Answer 1

这就是我的处理方式

// one behaviour for the search button
// this checks to see if the search button is visible, and if so, 
$('.mobile-search').on('click', function(event){
    event.preventDefault();
    event.stopPropagation() // stops bubbling

    if($('.oe_searchview').is(":visible")){
         // hide the search view
         $('.oe_searchview').hide();
    }
    else
    {
        // show the search view
        $('.oe_searchview').show().css('margin-bottom', '15px');
        if ($('.oe-right-toolbar').length) {
            viewOptions.hide();
        }
    }
});

// this second behaviour happens only 
// hide search if user clicks outside of the search button
$('html').on('click', function (ev) {
    if (!$(ev.target).parents('.oe_searchview').length && !$(ev.target).parents('.oe-search-options').length) { // if the click's parent has no .oe_searchview class then hide
        $('.oe_searchview').hide();
    } 
});