1
目前，我有一個jQuery UI菜單如下：是否可以將引導可摺疊列表菜單與jQuery UI菜單結合使用？
HTML
<div id="leftsidemenu">
<ul id="leftmenu" class="menu">
<li data-target="tabstransmgmt" class="listitem">Transaction Management</li>
<li data-target="tabsasprocessing" class="listitem">Configure Processing</li>
<!-- below item should only be visible to admins-->
<li data-target="tabsuseradmin" class="listitem">User Administration</li>
<li data-target="tabsabout" class="listitem">About</li>
</ul>
</div>
JS
$("#leftmenu").menu();
JS功能爲每次點擊菜單項：
$('#leftmenu>li').on('click', function(){
var mvar = 0;
$(".tabui").each(function() {
$(this).hide();
});
$(".listitem").each(function() {
$(this).css("background", "transparent");
});
$(this).css("background-color", "#C8C8C8");
var targetId = $(this).data('target');
var target = $(document.getElementById(targetId));
target.show();
});
$(function showTab(target) {
if (document.getElementById(target)) {
document.getElementById(target).show();
}
});
$(function hideTab(target) {
if (document.getElementById(target))
{
document.getElementById(target).hide();
}
});
因此，所有這些的基本最終結果是一個UI，該菜單在左側具有菜單列表，並根據所點擊的菜單右側填充相應的選項卡式面板以及選定的菜單項仍以深灰色背景突出顯示，表示已選中。下面是截圖：
現在我的目標是包括左側菜單中的可摺疊的子菜單，並在我的研究，我無法找到jQueryUI的支持這一點，但是，我發現，引導提供的東西這樣，所謂的可摺疊列表組：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="panel-group">
\t \t \t \t <div class="panel panel-default">
\t \t \t \t
\t \t \t \t <div class="panel-heading">
\t \t \t \t \t <h4 class="panel-title">
\t \t \t \t \t <a data-toggle="collapse" href="#collapse1">User Administration</a>
\t \t \t \t \t </h4>
\t \t \t \t </div>
\t \t \t \t <div id="collapse1" class="panel-collapse collapse">
\t \t \t \t \t <ul class="list-group">
\t \t \t \t \t <li class="list-group-item">One</li>
\t \t \t \t \t <li class="list-group-item">Two</li>
\t \t \t \t \t <li class="list-group-item">Three</li>
\t \t \t \t \t </ul>
\t \t \t \t \t
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t <div class="panel-heading">
\t \t \t \t \t <h4 class="panel-title">
\t \t \t \t \t <a data-toggle="collapse" href="#collapse2">About</a>
\t \t \t \t \t </h4>
\t \t \t \t </div>
\t \t \t \t <div id="collapse2" class="panel-collapse collapse">
\t \t \t \t \t <ul class="list-group">
\t \t \t \t \t <li class="list-group-item">One</li>
\t \t \t \t \t <li class="list-group-item">Two</li>
\t \t \t \t \t <li class="list-group-item">Three</li>
\t \t \t \t \t </ul>
\t \t \t \t </div>
\t \t \t \t
\t \t \t \t </div>
\t \t \t </div>我不知道從哪裏開始，或者如果它甚至有可能這跟我的jQu結合如果可能的話，我正在尋找關於如何實現這一點的任何想法。目標是讓父菜單在右側打開一個默認的選項卡式面板，而子菜單將具有與其父項的默認選項卡不同的其他選項卡。
或者是否有另一種方法來實現這個結果？
謝謝。