Question

我在JQuery中编写了一个非常基本的菜单。我的基本想法是，当我点击一个按钮时，我想要弹出菜单。当弹出该菜单时，会发生两件事：1）显示菜单，2）按钮被赋予一个可以关闭的新类。就像JQuery完全无视这个新课程一样。怎么办？

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

所以问题出在$(".close-dropdown").click(function () {

时

dom中没有.close-dropdown来附加该事件监听器，因此在一段时间后将类close-dropdown附加到div时，没有事件监听器。

这是一个已知问题，一个解决方案是event delegation

在此处详细了解... https://learn.jquery.com/events/event-delegation/

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

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

Answer 2

不要添加和/或删除课程。当文档准备就绪时，需要初始化Javascript代码。

如果您使用.addClass（）或删除关联的类，则无需重新加载页面即可重新初始化。

使用您的代码：

$('.dropdown').click(function(e){
  e.preventDefault();
  $('.drop-item').toggle();
})

Answer 3

我宁愿使用1个函数来处理这个而不是2.检查我的jsfiddle。

var on = false;

$(".toggle").click(function () {
if(on) {
    $(".drop-item").removeClass("show").addClass("hide");
    $(".fa-drop").removeClass("fa-angle-double-down").addClass("fa-angle-double-right");
  on = !on;
} else {
    $(".drop-item").addClass("show").removeClass("hide");
    $(".fa-drop").addClass("fa-angle-double-down").removeClass("fa-angle-double-right");
 on = !on;
}

});

https://jsfiddle.net/yw7ff0wz/

Answer 4

使用jQuery的事件委派语法与.on()而不是.click()。当您使用.click()并添加和删除dropdown类时，您的绑定将会丢失。

$("#popup").on("click", ".dropdown", 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");
});
$("#popup").on("click", ".close-dropdown", 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>

下拉菜单没有关闭？

4 个答案: