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结合如果可能的话，我正在寻找关于如何实现这一点的任何想法。目标是让父菜单在右侧打开一个默认的选项卡式面板，而子菜单将具有与其父项的默认选项卡不同的其他选项卡。
或者是否有另一种方法来实现这个结果？
谢谢。