Hide CSS dropdown menu with Javascript

Question

I have a dropdown that works with CSS. I want it to disappear when an item in the dropdown is clicked, but still function correctly after words.

Here is what I have so far:

$("span").click(function(){
	$(this).parent().hide();
	$("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});

.dropDownContainer{
  display: inline-block;
}
.dropDown{
  display: none;
  padding-left: 6px;
  background-color: black;
  color:white; 
  position: absolute;
}

.dropDownContainer:hover .dropDown {
  display: block;
}
span{
  cursor:pointer;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
  hover over this
  <div class="dropDown">
    this is the dropdown<br><br>
  
    click <span>this</span> to close drop down.
    <br><br>
    It doesn't work.
  </div>
</div>
<div id="text">

</div>

antoni · Accepted Answer · 2016-10-25 02:06:20Z

1

You should add a timeout to remove the display none right after you hide. so the cursor wont be positioned in a way it will automatically reopen (on hover this) so its fine.

$("span").off().click(function(){
    var dropdown = $(this).parent();
    dropdown.hide();
    setTimeout(function(){dropdown.removeAttr('style');}, 300);
    $("#text").html("Try hovering over it again. Now it's broken, because the display attribute was set for the element.");
});

answered Oct 25, 2016 at 2:06

antoni

5,5961 gold badge41 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Skeets Over a year ago

Works great. What is the function of the "off()"?

antoni Over a year ago

Oops i forgot to remove the unneeded off() before publish answer. Actually for my trial - directly on your code, i opened the JS console and override your event, that is why I off() it first. It means unbound all events binded to this element!

Community · Accepted Answer · 2020-06-20 09:12:55Z

You didn't have any event handler to hover and open it first. If you close or open something with CSS, you should use CSS to open or close it as well, same goes for JS/jQ, otherwise they may conflict.

SNIPPET

$(".dropDownHeader").on('mouseenter', function() {
  $(".dropDownContainer").show();
  $("kbd").on("click", function() {
    $('.dropDownContainer').hide();
  });
});

.dropDownContainer {
  display: none;
  padding-left: 6px;
  background-color: black;
  color: white;
  position: absolute;
}
.dropDownHeader:hover .dropDown {
  display: block;
}
kbd {
  cursor: pointer;
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header class="dropDownHeader">
  <h3>Hover over this</h3>
</header>
<div class="dropDownContainer">
  <p>This is the dropdown</p>

  <p>Click <kbd>this</kbd> to close drop down.</p>

  <p>It doesn't work.</p>
</div>

<article id="text">

</article>

Wim Mertens · Accepted Answer · 2016-10-25 02:23:34Z

0

I have updated your code a bit see this fiddle: https://jsfiddle.net/dLcLoggx/1/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropDownContainer">
  <span class="trigger">hover over this</span>
  <div class="dropDown">
    this is the dropdown<br><br>

    click <span>this</span> to close drop down.
    <br><br>
    It doesn't work.
  </div>
</div>
<div id="text">

</div>

.dropDownContainer{
  display: inline-block;
}
.dropDown{
  display: none;
  padding-left: 6px;
  background-color: black;
  color:white; 
  position: absolute;
}


span{
  cursor:pointer;
  color: red;
}

$(".dropDown span").click(function(){
    $(this).parent().slideUp();
});

$("span.trigger").hover(function(){
    $('.dropDown').slideDown();
});

edited Oct 25, 2016 at 2:23

answered Oct 25, 2016 at 2:10

Wim Mertens

1,7903 gold badges20 silver badges31 bronze badges

Collectives™ on Stack Overflow

Hide CSS dropdown menu with Javascript

3 Answers 3

2 Comments

SNIPPET

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

SNIPPET

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related