CODEWITHSUNDEEP
javascriptjquerycss
Skeets
Skeets

Reputation: 4848

Hide CSS dropdown menu with Javascript

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>

Upvotes: 1

Views: 54

Answers (3)

Wim Mertens
Wim Mertens

Reputation: 1790

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

Upvotes: 0

zer00ne
zer00ne

Reputation: 44086

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>

Upvotes: 0

antoni
antoni

Reputation: 5556

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.");
});

Upvotes: 1

Related Questions