下拉菜单没有关闭?

时间:2017-02-06 15:39:32

标签: javascript jquery html css

我在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>
&#13;
&#13;
&#13;

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

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

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

使用您的代码:

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

答案 2 :(得分:0)

我宁愿使用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/

答案 3 :(得分:0)

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