Derzeit habe ich ein Menü jQuery UI wie folgt:Ist es möglich, ein bootstrap-reduzierbares Listenmenü mit dem jQuery UI-Menü zu kombinieren?
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-Funktionen für jeden Klick von Menüpunkt:
Also das grundlegende Endergebnis von all dem ist eine UI, die eine Liste von Menüs auf der linken Seite hat, und je nachdem was angeklickt wird, wird die rechte Seite mit den entsprechenden Registerkarten und dem ausgewählten Menüeintrag gefüllt bleibt dunkelgrau hinterlegt, um anzuzeigen, dass es ausgewählt wurde. Hier ist ein Screenshot:
Jetzt ist mein Ziel ist zusammenklappbar Untermenü im linken Menü zu schließen, und in meiner Forschung, konnte ich nicht feststellen, dass jQueryUI dies unterstützt, jedoch fand ich, dass Bootstrap etwas bietet
<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>ich weiß nicht, wo ich anfangen soll, oder wenn es sogar möglich, dies mit meinem jQu zu kombinieren: reduzierbare Liste Gruppe wie diese, genannt UI-Menü, so suche ich nach Ideen, wie dies möglich ist, wenn möglich. Das Ziel besteht darin, dass das übergeordnete Menü auf der rechten Seite ein standardmäßiges Registerkartenfenster öffnet und die Untermenüs andere Registerkarten als die Standardregisterkarten des übergeordneten Menüs haben.
Oder gibt es eine andere Alternative, um dieses Ergebnis zu erzielen?
Vielen Dank.