我正在使用Bootstrap手风琴,该手风琴是基于从选择列表选项的选择选项动态创建的,因此,对于选择的每个选项,我将手风琴面板附加到现有手风琴。
以及能够添加面板,我希望能够删除面板。我确实考虑过关闭按钮,但我无法定位关闭按钮上的点击事件(跨度(。
这是我创建手风琴
时输出的样本<div id="menu">
<div class="panel list-group">
<a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm" data-parent="#menu">MESSAGES <span class="label label-info">5</span> <span class="fa fa-close pull-right"></span></a>
<div id="sm" class="sublinks collapse">
<div class="list-group-item">
TEST1
</div>
<div class="list-group-item">
TEST2
</div>
<div class="list-group-item">
TEST3
</div>
</div>
</div>
</div>
我以为单击此元素<span class="fa fa-close pull-right">
会导致事件发射,但从未这样做。它只是打开/关闭面板作为默认行为。
我确实考虑过尝试使用jQuery处理手风琴,但这似乎是很多额外的努力。
我需要将关闭按钮放在其他地方,还是缺少任何可以使它起作用的东西?
$(".fa-close").click(function(){
$(this).parent().parent().parent().remove();
})
您应该使用所谓的事件委托。
单击事件侦听器/处理程序已连接到共同祖先(在这种情况下为div#menu
(。
使用此技术,通常必须在事件对象event.target
属性的帮助下测试原始的单击元素,以了解是否适用任何操作。通过使on()
函数在处理程序函数之前接受第二个参数(是与目标匹配的选择器(,请轻松此过程。然后,您只需要实现实际操作:在这种情况下,关联的.panel
删除。
主要优点是动态添加的.panels
(事件注册后(还将触发"删除"处理程序。只有一个功能保存在内存中。
您还必须将span.fa-close
放置在锚点外面,并使用一些CSS来防止手风琴崩溃的行为来干扰密切的动作。
示例:
$(function(){
// When a click happens in the menu and has been triggered
// by an element having the '.fa-close' applied to it.
$('#menu').on('click', '.fa-close', function(e){
// Remove the associated '.panel' element
$(this).closest('.panel').remove();
});
});
#menu .panel{position: relative}
#menu .fa-close{position: absolute; right:15px; top:15px; cursor:pointer;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="menu">
<div class="panel list-group">
<a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm1" data-parent="#menu">
MESSAGES <span class="label label-info">5</span>
</a>
<div id="sm1" class="sublinks collapse">
<div class="list-group-item">
TEST1
</div>
<div class="list-group-item">
TEST2
</div>
<div class="list-group-item">
TEST3
</div>
</div>
<span class="fa fa-close pull-right" title="Remove this entry"></span>
</div>
<div class="panel list-group">
<a href="#" class="list-group-item default" data-toggle="collapse" data-target="#sm2" data-parent="#menu">
MESSAGES <span class="label label-info">3</span>
</a>
<div id="sm2" class="sublinks collapse">
<div class="list-group-item">
TEST4
</div>
<div class="list-group-item">
TEST5
</div>
<div class="list-group-item">
TEST6
</div>
</div>
<span class="fa fa-close pull-right"></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
否则,您必须在每个span
上单击事件处理程序,并且每次将新面板添加到DOM时。