嵌套數據切換元素

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而不是父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'); 實現類似手風琴的行為。

Answer 1

您可以使用event delegation而不是內聯data attributes來顯示您的模式，傳入選擇器以排除行的加號子項，這使用帶有event delegation JQuery's .on() ，您可能希望在DOM Ready上添加此腳本或者如果表是按照你說的那樣生成的，通過腳本，在表完全形成后運行它，或者你可以修改它以在表本身上使用委托：

$(".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');
});