javascript - 嵌套数据切换元素

Question

我有一种在循环中生成的表格显示。

<div class="container agenda" id="test_container">


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_1">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>09.45-10.15</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>First title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some Text 1</b></p>Some other text 1
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_1_collapsible" role="button" aria-expanded="false" aria-controls="test_1_collapsible"></span></div>
</div>

<div id="test_1_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_2">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>10.30-11.00</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Second title</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 2</b></p>Some other text 2
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_2_collapsible" role="button" aria-expanded="false" aria-controls="test_2_collapsible"></span></div>
</div>

<div id="test_2_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>


<div class="agenda-item row v-center border-top border-5 py-2" data-toggle="modal" data-target="#test_3">
    <div class="col-12 col-md-2 font-weight-bold timeslot"><i class="far fa-clock location-icon"></i>11.15-11.45</div>
    <div class="col-12 col-md-3 text-primary">
        <p><strong>Some title 3</strong></p>
    </div>
    <div class="col-12 col-md-6">
        <p class=""><b>Some text 3</b></p>Some other text 3
    </div>
    <div class="col-12 col-md-1 toggle-collapse"><span class="fas fa-2x fa-plus-circle" data-target="#test_3_collapsible" role="button" aria-expanded="false" aria-controls="test_3_collapsible"></span></div>
</div>

<div id="test_3_collapsible" class="row collapse">
    <div class="col-10 offset-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

</div>

我想做的是每当我按行 div 上的任意位置时弹出模式，除了按加号图标时。然后我想用信息来扩展/折叠额外的分区。我知道加号图标属于模式触发器。

尝试使用 event.stopPropagation(); 但没有任何结果。

当然，我可以在每个同级 div 上添加 data-toggle 而不是父级，但这会产生死区这不会触发模式(我宁愿避免的事情)。

关于如何实现这一目标有什么想法吗？

编辑:

有人索要脚本:

$(document).ready(function(){

$('.agenda .row').on('click', '.toggle-collapse', function(e){

  var collapse_element = $(e.target.getAttribute('data-target'));

  e.stopPropagation();

  collapse_element.siblings('.collapse').collapse('hide');
  collapse_element.collapse('toggle');

});

通过 collapse_element.siblings('.collapse').collapse('hide'); 实现类似 Accordion 的行为。

Answer 1

您可以使用事件委托(delegate)而不是内联数据属性来显示模式，传入选择器以排除行的加号子项，这使用JQuery 的 .on() 具有事件委托(delegate)，您需要在 DOM Ready 上添加此脚本，或者如果表是正如您所说，通过脚本生成，在表完全形成后运行它，或者您可以修改它以在表本身上使用委托(delegate):

$(".row").on('click', ':not(.fa-plus-circle)', function (e) {
     //e.stopPropagation(); Not necessary if you remove the data-toggle="modal" data-target="#example_modal" from your .row element
     // Show dialog
     $('#example_modal').modal('show');
});