Làm thế nào để có được yếu tố được nhấp trong sự kiện thu gọn Bootstrap?

Question

tôi đang gặp khó khăn để tìm thấy những yếu tố neo nhấp trong trường hợp sụp đổ sử dụng Bootstrap 3.3.4 .:

$('.collapse').on('show.bs.collapse', function (e) { 
    // Get clicked element that initiated the collapse... 
}); 

tôi cần điều này vì tôi muốn để ngăn chặn sụp đổ nếu các yếu tố nhấp có một thuộc tính dữ liệu nhất định . Một tùy chọn khác sẽ là móc vào bằng cách sử dụng .on('click', function()), tuy nhiên có các sự kiện khác xảy ra khi nhấp cần chạy vì vậy điều này dường như không xảy ra với tôi. Tìm kiếm trong DOM cho neo gần nhất hoặc một cái gì đó tương tự sẽ không hoạt động tốt vì có nhiều neo bên cạnh eachother.

Answer 1

Kể từ trường hợp của tôi đặc trưng nhiều neo cạnh eachother (tức là không tuân thủ cấu trúc Bootstrap thông thường.), Tôi đã kết thúc tìm kiếm neo nhấp bằng cách sử dụng ID div sụp đổ của:

$('.collapse').on('show.bs.collapse', function (e) { 
    // Get clicked element that initiated the collapse... 
    clicked = $(document).find("[href='#" + $(e.target).attr('id') + "']") 
}); 

Answer 2

này nên làm việc: http://jsfiddle.net/8s0mn0f4/3/

console.log($(e.target).siblings('.panel-heading').find('a')) 

Answer 3

giải pháp này vòng tất cả các neo sụp đổ và tìm kiếm các mục tiêu href. Nó sẽ làm việc cho cả hai tham chiếu bởi #id và theo .class

Trong ví dụ này, tôi sử dụng nó để thêm lớp đã thu gọn vào phần tử được nhấp.

$(document).ready(function() { 
     checkCollapsed(); 
    }) 

    function checkCollapsed() { 
     $('.collapse').on('shown.bs.collapse', function (e) { 
      triggerCollapsedClass(); 
     }).on('hidden.bs.collapse', function (e) { 
      triggerCollapsedClass(); 
     }); 
    } 

    function triggerCollapsedClass() { 
     $("[data-toggle=collapse]").each(function (i, item) { 
      var selector = $(item).attr("href"); 
      if ($(selector).hasClass("in")) { 
       $(item).addClass("collapsed"); 
      } else { 
       $(item).removeClass("collapsed"); 
      } 
     }) 
    } 

Answer 4

Hãy thử điều này

$element.on('shown.bs.collapse', function(e) { 
    var $clickedBtn = $(e.target).data('bs.collapse').$trigger; 
}); 

Answer 5

Khi bootstrap của đám cháy sụp đổ, và một phần tử div được thể hiện đẳng cấp của nó trở nên panel-collapse collapse in.

Tôi cần điều này để tôi có thể chuyển nội dung ajax vào bảng mới được mở. Bạn có thể thêm thuộc tính id hoặc data- vào phần tử đó có thể giúp xác định neo.

HTML

<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-X" aria-expanded="true" aria-controls="accordion-x" id="accordionanchor-X"> 
Information X 
</a> 
… 
<div id="collapse-x" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="pageheading-X"> 
    <div class="panel-body"> 
    … 
    </div> 
</div> 

Javascript

$('.collapse').on("shown.bs.collapse", function (e) { 
    var clicked = $(".panel-collapse.collapse.in").attr("id"); 
    alert("collapse " + clicked); 
});