我正在尝试在 Accordion 内部创建一个 Accordion ......并且我有点挣扎。
本质上,我有一个 div .applicant
,单击它会添加一个 .expand
类,它将高度设置为 auto,但是,在 内部.applicant
div,我有另一个 div .applicant-child
,它应该做同样的事情,并且确实......但是,.applicant
在您关闭时关闭单击.applicant-child
,这意味着您必须再次单击.applicant
才能打开查看嵌套元素。
这是我的代码:
HTML
<div class="row">
<div class="col-sm-12">
<div class="applicant">
<p><b>PS4 Tournaments</b></p>
<div class="applicant-child">
<p>lalal</p>
<p>lalal</p>
</div>
</div>
</div>
</div>
jQuery
$('.applicant').click(function(){
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
$('.applicant-child').click(function(){
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
我可以简单地从 .appliant
中删除 $(this).removeClass('expand');
,但我们将显示大量数据,因此并不理想。
如何解决这个问题?
提前致谢:)
最佳答案
这只是事件冒泡的预期行为。
看这个link关于 jQuery 如何禁用 click-Event
来冒泡 DOM 并触发父元素上的事件。
基本上,您只需这样做:
$('.applicant-child').click(function(event){
event.stopPropagation();
if ($(this).hasClass('expand')) {
$(this).removeClass('expand');
} else {
$( this ).addClass('expand');
}
});
关于javascript - .click() 在嵌套在 .click() 元素内部的元素上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51770701/