如何使用jQuery UI制作带有子菜单的引导菜单？

Question

我可以使用引导和jQuery创建一个菜单，但我还有其他与jquery冲突的代码。是否有一种方法可以像这些例子那样制作下拉菜单(基本上是一个带有子菜单的简单下拉菜单)，但是使用jQuery UI呢？

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

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

Answer 1

像jQuery-菜单这样的插件可以使用jQuery UI来实现这一点。您可以自定义菜单小部件，使其看起来像下拉列表：

​

$(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>

​