Dropdown hide show using jQuery

Question

I want to show the search and cart widgets on click instead of hover as you look here https://joomlance.com/

I have used this Javascript code:

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

But this doesn't work well, also it hide the search widget when try to write any thing and it hide the card widget when click on remove product icon and i don't work on the sticky header

how can i get this done please ?

https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element — epascarello, Dec 21 '18 at 23:07

score 0 · Answer 1 · answered Dec 21 '18 at 23:27

0

if I understand correctly you no need to this code:

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

because it's hiding container after every click on body (also when you focus on search input), at least.

Just try to use this:

$(function(){

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


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

});

answered Dec 21 '18 at 23:27

pantyuhind

119
4

yes , you can see it here https://www.dropbox.com/s/0gwx1ezwt9a5mki/search.php?dl=0 – Amine Lahmar Dec 22 '18 at 00:09

score 0 · Answer 2 · answered Dec 21 '18 at 23:27

0

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

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

elem means the element you want to use. I’m not sure if this works, tell me if it doesn’t.

answered Dec 21 '18 at 23:27

object-Object

1,587
1
12
14

Dropdown hide show using jQuery

2 Answers2