Как создать складное меню с вложенными элементами меню?

При нажатии на уровень меню 1 он должен расширяться, и все братья и сестры должны быть закрыты. То же самое должно происходить на любом уровне пунктов меню при нажатии.Как создать складное меню с вложенными элементами меню?

Пример: Нажмите на уровень меню 3 и пункты меню на уровне 4 должен не отображения, и все пункты меню на уровне 3 должен дисплей.

Как я могу это достичь? Вот то, что я до сих пор:

JSFiddle

HTML:

<div id="div1"> 
<ul class="nav level-1"> 
    <li class="has-submenu"> 
    <a href="#">Menu Level1</a> 
    <ul class="level-2"> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li class="has-submenu"> 
       <a href="#">Menu Level3</a> 
       <ul class="level-4"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-3"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li><a href="#">Menu-Level3</a></li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-4"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
    <li class="has-submenu"> 
    <a href="#">Menu Level1 </a> 
    <ul class="level-2"> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li class="has-submenu"> 
       <a href="#">Menu Level3</a> 
       <ul class="level-4"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-3"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li><a href="#">Menu-Level3</a></li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-4"> 
        <li><a href="#">Menu-Level4</a></li> 
        <li><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
    <li class="has-submenu"> 
    <a href="#">Menu Level1</a> 
    <ul class="level-2"> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li class="has-submenu"> 
       <a href="#">Menu Level3</a> 
       <ul class="level-4"> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-3"> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
     <li class="has-submenu"> 
      <a href="#">Menu-Level2</a> 
      <ul class="level-3"> 
       <li><a href="#">Menu-Level3</a></li> 
       <li class="has-submenu"> 
       <a href="#">Menu-Level3</a> 
       <ul class="level-4"> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
        <li class="end"><a href="#">Menu-Level4</a></li> 
       </ul> 
       </li> 
      </ul> 
     </li> 
    </ul> 
    </li>

CSS:

a { 
    display:block; 
    background:#aaa; 
    border:1px solid #ccc; 
    padding:5px; 
    color:#fff; 
} 
li li { 
    display:none; 
} 
.has-submenu > a:after { 
    content:' + '; 
} 
.has-submenu .nav-open > a:after { 
    content:' - '; 
} 
li li a { 
    padding-left:40px; 
    background:#888; 
} 
li li li a { 
    padding-left:80px; 
    background:#333; 
}

JQuery:

$('.has-submenu > a').on('click', function (e) { 
    e.preventDefault(); 
    $(this).parent().toggleClass('nav-open').find('> ul > li').slideToggle(); 
    $(this).parent().siblings().find('> ul > li').slideUp(); 
    $(this).parent().siblings().removeClass('nav-open'); 
});

только красным цветом часть должна быть показана, если нажать на уровень меню 4:

источник

2015-02-18 asdfdefsad

Эти обновления будут демонстрировать поведение, которое вы ищете.

добавить класс CSS называется hidden:

.hidden { 
    display:none !important; 
}

Заменить строку JavaScript 4 с:

$(this).parent().siblings().toggleClass('hidden').find('> ul > li').slideUp();

Это не будет закрывать/открывать subnavs при закрытии родительского СЧА, но такое поведение WASN» t, упомянутых в вашем вопросе.

Пример: http://jsfiddle.net/t3jb04L1/3/

источник

2015-02-18 20:10:50 skrawler

Как создать складное меню с вложенными элементами меню?

ответ

Смежные вопросы