Bootsrap會在鏈接上擴展，再加上指向另一個頁面的鏈接

Question

我有一個頁面，列出了一大堆類別及其相關項目。 我想做的是讓此頁面列出類別，如果單擊其中一個，它將展開以顯示該類別中的項目。 我正在使用bootstrap的內置擴展/折疊功能來實現這一目標。

很好，除非沒有加載js（如果有js錯誤，則可能是這種情況，您的移動連接速度很慢，並且js尚未下載，等等）。 為了解決這些情況，我希望我的類別鏈接到獨立的類別頁面。

問題在於，當您單擊類別時，它會擴展項目列表，但隨后會將您帶到類別頁面，而不是將您留在原處。

知道我該如何解決嗎？ 我知道我可以使用return false，但是我真的不想開始對bootstrap.js文件進行修改。

謝謝！

<a class="toggle_div" data-toggle="collapse" data-target=".category_56"  href="link.html">
  Category 56
</a>
<div class=" category_56 in">
  Here is the info to expand and collapse
</div>

Answer 1

此屬性：

href="link.html"

是你的問題。

如果您需要測試相關的div是否已完全加載，則可以執行以下操作：

$($(this).data('target')).length == 1

這是您的toggle_div錨點。

因此，可能的解決方案可能是：

 $('.toggle_div').on('click', function(e) { if ($($(this).data('target')).length == 1) { // // if the related div is loaded you can prevent default action // e.preventDefault(); } else { // goto next page } }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <a class="toggle_div" data-toggle="collapse" data-target=".category_56" href="link.html"> Category 56 </a> <div class=" category_56 in"> Here is the info to expand and collapse </div>