Question

我可以使用bootstrap和jQuery创建一个菜单，但是我有其他代码与jquery UI冲突。有没有办法制作一个下拉菜单就像这些例子（基本上是一个简单的子菜单下拉菜单），但有jQuery UI？

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

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

Answer 1

有像jQuery-Menu这样的插件可以使用jQuery UI完成此操作。您可以自定义menu小部件，使其看起来像下拉列表：

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

如何使用jQuery UI制作带子菜单的bootstrap菜单栏？

1 个答案: