Как создать блокнот с подменю с помощью jQuery UI?

Question

Я могу создать меню с bootstrap и jQuery, но у меня есть другой код, который конфликтует с пользовательским интерфейсом jquery. Есть ли способ сделать выпадающее меню так же, как эти примеры (в основном простой выпадающий список с подменю), но с пользовательским интерфейсом jQuery?

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>