arsilhavy arsilhavy - 4 years ago 86
HTML Question

Dropdown menu not closing?

I'm coding a very basic menu in JQuery. My basic idea is that when I click a button, I want my menu to pop up. When that menu pops up, two things happen: 1) the menu is shown, and 2) the button is given a new class to be able to close. It's like JQuery is completely ignoring this new class. What do?

http://codepen.io/asilhavy/pen/apjvYo?editors=1010



$(".dropdown").click(function () {
$(".drop-item").addClass("show").removeClass("hide");
$(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right");
$(".dropdown").addClass("close-dropdown").removeClass("dropdown");
});
$(".close-dropdown").click(function () {
$(".drop-item").removeClass("show").addClass("hide");
$(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
$(".close-dropdown").removeClass("close-dropdown").addClass("dropdown");
});

ul {
list-style: none;
}
.hide {
display: none;
}
.show {
display: block;
}

<script src="https://use.fontawesome.com/f19ebae6ca.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="popup">
<li class="dropdown"><i class="fa fa-drop fa-angle-double-right" aria-hidden="true"></i> Click to Dropdown</li>
<li><a href="#" class="drop-item hide">Item 1</a></li>
<li><a href="#" class="drop-item hide">Item 2</a></li>
<li><a href="#" class="drop-item hide">Item 3</a></li>
<li><a href="#" class="drop-item hide">Item 4</a></li>
</ul>




Answer Source

so the problem is when you do $(".close-dropdown").click(function () {

there is no .close-dropdown in the dom to attach that event listener ,so when after some time you attach the class close-dropdown to div, there is no event listener to it.

this is a known problem and one solution is event delegation

read more about it here ... https://learn.jquery.com/events/event-delegation/

i have delegated event to body tag , but you can decide for that after understanding the delegation

$('body').on('click', ".dropdown", function () {
    //console.log(2)
	$(".drop-item").addClass("show").removeClass("hide");
	$(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right");
	$(".dropdown").addClass("close-dropdown").removeClass("dropdown");
})


$('body').on('click', ".close-dropdown", function () {	
  //console.log(1)
  $(".drop-item").removeClass("show").addClass("hide");
	$(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
	$(".close-dropdown").removeClass("close-dropdown").addClass("dropdown");
});
ul {
  list-style: none;
}
.hide {
  display: none;
}
.show {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="popup">
			<li class="dropdown"><i class="fa fa-drop fa-angle-double-right" aria-hidden="true"></i> Click to Dropdown</li>
			<li><a href="#" class="drop-item hide">Item 1</a></li>
			<li><a href="#" class="drop-item hide">Item 2</a></li>
			<li><a href="#" class="drop-item hide">Item 3</a></li>
			<li><a href="#" class="drop-item hide">Item 4</a></li>
		</ul>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download