javascript - 是否可以将 Bootstrap 可折叠列表菜单与 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>