使用jQuery下拉隐藏显示

我想在点击时显示搜索和购物车窗口小部件, 而不是将鼠标悬停在此处, 如你在这里查看：https：//joomlance.com/

我使用了以下Javascript代码：

jQuery(document).ready(function() {
    jQuery('body').click(function(e) {
        var container = jQuery(".woodmart-search-dropdown");

        // if the target of the click isn't the container nor a descendant of the container
        if (!container.is(e.target) && container.has(e.target).length === 0) 
        {
            console.log("as Menu");
            container.hide();
        } 
    });

    jQuery('.search-button').click(function(e) {
        jQuery('div.woodmart-search-dropdown').toggle();
        console.log("Opened Menu");
        e.stopPropagation();
    });
});

但这不能很好地工作, 在尝试写任何东西时它也会隐藏搜索窗口小部件, 在单击”删除产品”图标时它会隐藏卡窗口小部件, 而我在粘性标题上不起作用

请问我该怎么做？

#1

如果我理解正确, 则无需此代码：

jQuery('body').click(function(e){ ....

因为至少在每次点击主体后(以及当你专注于搜索输入时)它都会隐藏容器。

只需尝试使用此：

$(function(){

  var container = $('.woodmart-search-dropdown');


  $('.search-button').on('click', function(e) {
      container.toggle();
  });

});

#2

//To hide:
elem.style.display="none";

//To show:
elem.style.display="inline";

elem表示你要使用的元素。我不确定是否可行, 请告诉我是否可行。