まず、BootstrapのCSSとJavaScriptをページに組み込む必要があります。以下のコードを<head>セクションに追加してください。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>次に、サイドバーの基本的な構造を作成します。以下のコードをHTMLファイルに追加してください。
<div class="sidebar">
<ul class="nav nav-sidebar">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li class="treeview">
<a href="#">メニュー3<span class="caret"></span></a>
<ul class="treeview-menu">
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
</ul>
</li>
<li><a href="#">メニュー4</a></li>
</ul>
</div>上記のコードでは、<div>要素のsidebarクラスを使用してサイドバーを作成し、<ul>要素のnav-sidebarクラスを使用してナビゲーションメニューを作成しています。treeviewクラスを持つ<li>要素は、ツリービューの親メニューを表します。親メニューの下には、treeview-menuクラスを持つ<ul>要素があり、サブメニューを含んでいます。
最後に、ツリービューが展開および収束するようにするために、JavaScriptを使用します。以下のコードを追加してください。
$(document).ready(function(){
$('.treeview > a').click(function(){
$(this).parent().toggleClass('active');
$(this).next('ul').slideToggle();
return false;
});
});上記のコードでは、.treeviewクラスを持つ要素の子要素のリンクがクリックされたときに、親要素である<li>要素のactiveクラスをトグルし、サブメニューの表示/非表示を切り替えています。
これで、Bootstrapを使用したサイドバーにツリービューを追加する準備が整いました。必要に応じてメニュー項目やサブメニューを追加、変更することができます。
以上が、Bootstrapを使用したサイドバーにツリービューを作成する方法とコード例です。これを参考にして、自分のプロジェクトに適用してみてください。