Javascript 在图标上单击两次'；t关闭下拉列表

我快发疯了

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

我有以下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方面的新手，因此非常感谢您的帮助。

这就是我的方法

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

---

你也可以显示你的HTML吗？确定这个

$（'HTML'）。在（'click.search'）上，函数（ev）

可以工作吗？我从来没有见过这种方式。只有这样：

$（'HTML'）。在（'click'，'search'，函数（ev）上

我添加了HTML代码It is event.namespacing，请检查：似乎您只需要一个简单的if/else检查，看看下拉列表是否已经可见？