Показ раскрывающегося списка с использованием jQuery

Question

Я хочу показывать виджеты поиска и корзины по клику, а не при наведении курсора, как вы смотрите здесь 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();
    });
});

Ноэто не очень хорошо работает, а также скрывает виджет поиска при попытке написать что-либо, и скрывает виджет карты при нажатии на значок удаления продукта, и я не работаю с липким заголовком

как я могусделай это, пожалуйста?

Answer 1

//To hide:
elem.style.display=“none”;

//To show:
elem.style.display=“inline”;

Элемент означает элемент, который вы хотите использовать.Я не уверен, что это работает, скажите мне, если это не так.

Answer 2

если я правильно понимаю, вам не нужен этот код:

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

, потому что он скрывает контейнер после каждого клика по телу (также когда вы фокусируете внимание на поиске), по крайней мере.

Просто попробуйте использовать это:

$(function(){

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


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

});