是否可以将引导可折叠列表菜单与jQuery UI菜单结合使用？

Question

目前，我有一个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不支持这个，但是，我发现bootstrap提供了类似这样的东西，称为可折叠列表组：

<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">
				<div class="panel panel-default">
				
				  <div class="panel-heading">
					<h4 class="panel-title">
					  <a data-toggle="collapse" href="#collapse1">User Administration</a>
					</h4>
				  </div>
				  <div id="collapse1" class="panel-collapse collapse">
					<ul class="list-group">
					  <li class="list-group-item">One</li>
					  <li class="list-group-item">Two</li>
					  <li class="list-group-item">Three</li>
					</ul>
					
				  </div>
				  
				  <div class="panel-heading">
					<h4 class="panel-title">
					  <a data-toggle="collapse" href="#collapse2">About</a>
					</h4>
				  </div>
				  <div id="collapse2" class="panel-collapse collapse">
					<ul class="list-group">
					  <li class="list-group-item">One</li>
					  <li class="list-group-item">Two</li>
					  <li class="list-group-item">Three</li>
					</ul>
				  </div>
				  
				</div>
			  </div>

我不知道从哪里开始，或者甚至可以将它与我的jQuery UI菜单结合起来，所以我正在寻找有关如何实现这一目标的任何想法。目标是让父菜单在右侧打开默认选项卡式面板，子菜单将包含与其父级的默认选项卡不同的其他选项卡。

或者是否有另一种方法可以实现这一结果？

谢谢。

Answer 1

事实证明，我需要做的就是将jQueryUI菜单放入bootstrap菜单中，一切正常：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
			  src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"
			  integrity="sha256-DI6NdAhhFRnO2k51mumYeDShet3I8AKCQf/tf7ARNhI="
			  crossorigin="anonymous"></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">
<link rel="stylesheet" href="https://code.jquery.com/ui/jquery-ui-git.css">
  <div class="panel-group">
				<div class="panel panel-default">
				
				  <div class="panel-heading">
					<h4 class="panel-title">
					  <a data-toggle="collapse" href="#collapse1">User Administration</a>
					</h4>
				  </div>
				  <div id="collapse1" class="panel-collapse collapse">
					 <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>
					
				  </div>
				    <div class="panel-heading">
					<h4 class="panel-title">
					  <a data-toggle="collapse" href="#collapse2">About</a>
					</h4>
				  </div>
				  <div id="collapse2" class="panel-collapse collapse">
					<ul class="list-group">
					  <li class="list-group-item">One</li>
					  <li class="list-group-item">Two</li>
					  <li class="list-group-item">Three</li>
					</ul>
				  </div>
				  
				  
				</div>
			  </div>
<script>
$(document ).ready(function() {


$("#leftmenu").menu();
  });
</script>