Wie erstellt man eine Bootstrap-Menüleiste mit einem Untermenü mit jQuery UI?

Question

Ich kann ein Menü mit Bootstrap und jQuery machen, aber ich habe anderen Code, der Konflikte mit Jquery UI. Gibt es eine Möglichkeit, ein Dropdown-Menü wie diese Beispiele zu erstellen (im Grunde ein einfaches Dropdown-Menü mit Untermenüs), aber mit jQuery UI?

http://www.bootply.com/nZaxpxfiXz#

http://www.bootply.com/7G8IVMj9k0#

Answer 1

Es gibt Plugins wie jQuery-Menu, die jQuery UI funktioniert dies mit. Sie können das Widget menu anpassen wie ein Drop-Down aussehen:

$(function() { 
 
    $("#menu").menu(); 
 
    $('button').on('click', function() { 
 
    $("#menu").toggleClass('hidden'); 
 
    }); 
 
});

.ui-menu { 
 
    width: 150px; 
 
} 
 
.hidden, 
 
.ui-menu.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<button>Open</button> 
 
<ul id="menu" class="hidden"> 
 
    <li class="ui-state-disabled">Aberdeen</li> 
 
    <li>Ada</li> 
 
    <li>Adamsville</li> 
 
    <li>Addyston</li> 
 
    <li>Delphi 
 
    <ul> 
 
     <li class="ui-state-disabled">Ada</li> 
 
     <li>Saarland</li> 
 
     <li>Salzburg an der schönen Donau</li> 
 
    </ul> 
 
    </li> 
 
    <li>Saarland</li> 
 
    <li>Salzburg 
 
    <ul> 
 
     <li>Delphi 
 
     <ul> 
 
      <li>Ada</li> 
 
      <li>Saarland</li> 
 
      <li>Salzburg</li> 
 
     </ul> 
 
     </li> 
 
     <li>Delphi 
 
     <ul> 
 
      <li>Ada</li> 
 
      <li>Saarland</li> 
 
      <li>Salzburg</li> 
 
     </ul> 
 
     </li> 
 
     <li>Perch</li> 
 
    </ul> 
 
    </li> 
 
    <li class="ui-state-disabled">Amesville</li> 
 
</ul>