Jquery Уплотненный Аккордеон Показать только один уровень

Question

Предположим, что у меня есть следующая структура:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3 
     <ul> 
      <li>Item11</li> 
      <li>Item12</li> 
      <li>Item13</li> 
     </ul> 
    </li> 

Эта структура дерева может иметь много уровней.

Сначала я хочу показать следующий список:

Item 1 

Item 2 

Item 3 + 

Когда я нажимаю на + список становится

Item 3 - 

    Item 11 

    Item 12 

    Item 13 

Таким образом, родительский список исчезает и Подсписок показано. Если я нажму -, то все будет возвращено в предыдущий список.

Есть ли какой-нибудь jquery-плагин для этого?

Возможно, некоторые варианты в аккордеоне?

Заранее спасибо.

Answer 1

Использовал Dkouk свою версию, чтобы создать то, что вам нужно.

EDIT 1: Скрыть другие пункты меню EDIT 2: Меню второго уровня

$(function() { 
 
    
 
    
 
    $('ul li').each(function() { 
 
    if ($(this).find('ul').length > 0){ 
 
    $(this).addClass('child'); 
 
    } 
 

 

 
    
 
    }); 
 
    
 
    $('ul li.child span').click(function() { 
 
    $(this).parent().toggleClass('open').find('ul').first().slideToggle(); 
 
    
 
      $(this).parent().siblings().slideToggle(); 
 

 
    
 
}); 
 
    
 
    
 
});

ul { 
 
    list-style:none; 
 
} 
 
ul li.child span:after { 
 
    content:"+"; 
 
} 
 
ul li.child.open span:after { 
 
    content:"-"; 
 
} 
 
li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<ul class="main"> 
 
    <li><a href="#">Item 1</a></li> 
 
    <li><a href="#">Item 2</a></li> 
 
    <li> 
 
    <span>Item 3</span> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li> 
 
     <span>Item 2</span> 
 
     <ul> 
 
      <li><a href="#">Item 1</a></li> 
 
      <li><a href="#">Item 2</a></li> 
 
      <li><a href="#">Item 3</a></li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Item 3</a></li> 
 
    </ul> 
 
    </li> 
 
</ul>

Answer 2

Вы можете добавить класс в свой список, когда он есть подсписок, и переключить список и переключить другой класс для родителя списка, чтобы можно было изменить «+» на «-».

Вы можете использовать столько уровней, и код будет работать, Я добавляю span к списку, у которого есть дочерний элемент, но он может запускать щелчок только по тексту, если вы запускаете щелчок для списка LI и открываете подсписку затем снова закроется.

Вы можете создать стиль. Вот простой пример:

$(function() { 
 
     
 
    
 
     $('ul li').each(function() { 
 
     if ($(this).find('ul').length > 0){ 
 
     $(this).addClass('child'); 
 
     } 
 

 

 
     
 
     }); 
 
     
 
     $('ul li.child span').click(function() { 
 
     $(this).toggleClass('open').parent().find('ul:first').slideToggle(); 
 
     $(this).parent().siblings().slideToggle(); 
 
    }); 
 
     
 
     
 
    });

ul { 
 
     list-style:none; 
 
    } 
 
    ul li.child span:after { 
 
     content:"+"; 
 
    } 
 
    ul li.child span.open:after { 
 
     content:"-"; 
 
    } 
 
    ul li ul { display:none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
    <ul> 
 
     <li><a href="#">Item 1</a></li> 
 
     <li><a href="#">Item 2</a></li> 
 
     <li> 
 
     <span>Item 3</span> 
 
     <ul> 
 
      <li><a href="#">Item 1</a></li> 
 
      <li><a href="#">Item 2</a></li> 
 
      <li> 
 
      <span>Item 3</span> 
 
      <ul> 
 
       <li><a href="#">Item 1</a></li> 
 
       <li><a href="#">Item 2</a></li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul>