Bootsrapをリンク上に展開し、別のページへのリンクを追加

Question

カテゴリとその関連項目をすべて列挙したページがあります。私がしたいのは、このページにカテゴリを一覧表示させ、それをクリックすると、そのカテゴリのアイテムを表示するように展開されます。私はこれを実現するために、ブートストラップの拡張/折りたたみ機能に組み込まれています。

jsがロードされない限り（これはjsエラーがある場合、遅いモバイル接続でjsがまだダウンロードされていないなどの場合があります）、これは問題ありません。これらのケースを説明するために、カテゴリをスタンドアロンカテゴリページにリンクする必要があります。

カテゴリをクリックすると、アイテムのリストが展開されますが、現在の場所を保持するのではなく、カテゴリページに移動するという問題があります。

どのように私はこれを解決できますか？私は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>