我在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;
答案 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;
}
});
答案 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>