javascript - 下拉菜单没有关闭？

Question

我正在用 JQuery 编写一个非常基本的菜单。我的基本想法是，当我单击一个按钮时，我希望弹出菜单。当该菜单弹出时，会发生两件事:1) 显示菜单，以及 2) 按钮被赋予一个新类以便能够关闭。就好像 JQuery 完全忽略了这个新类。做什么？

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 1

所以问题是当你执行 $(".close-dropdown").click(function () {

在 dom 中没有 .close-dropdown 来附加那个事件监听器，所以当一段时间后你将类 close-dropdown 附加到 div 时，有没有事件监听器。

这是一个已知问题，一种解决方案是事件委托(delegate)

在此处阅读更多信息... https://learn.jquery.com/events/event-delegation/

我已将事件委托(delegate)给 body 标签，但您可以在了解委托(delegate)后决定

$('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>