эффективный способ для выбора

Question

я получил эту структуру:

<ul class="depth-one"> 
    <li>Category 1 <span class="do">+</span> 
     <ul class="depth-two"> 
      <li > Category 1.1 <span class="do">+</span> 
       <ul class="depth-three"> 
        <li>Category 1.2.1</li> 
        <li>Category 1.2.2</li> 
       </ul> 
      </li> 
      <li> Category 1.2</li> 
      <li> Category 1.3</li> 
     </ul> 
    </li> 
    <li> Category 2 <span class="do">+</span> 
     <ul class="depth-two"> 
      <li>Category 2.1</li> 
      <li>Category 2.2</li> 
      <li>Category 2.3</li> 
     </ul> 
    </li> 
    <li>Category 3 <span class="do">+</span> 
     <ul class="depth-two"> 
      <li>Category 3.1</li> 
      <li>Category 3.2</li> 
      <li>Category 3.3</li> 
     </ul> 
    </li> 
</ul> 

с этим CSS:

ul{ 
    list-style:none; 
    padding:0; 
    margin:0; 
} 
ul li{ 
    width:220px 

} 
.depth-one{ 

} 
.depth-two{ 
    display:none; 
} 
.depth-three{ 
    display:none; 
} 

.do{ 
    float:right; 
    font-weight:bold; 
    color:blue; 
    cursor:pointer; 
} 

То, что я хочу сделать, это всякий раз, когда я нажимаю на классе «делать» (пролетов) Я хотел бы переключить элемент UL шкафа.

Как я могу выбрать элемент UL шкафа для span с помощью jQuery, поэтому я могу использовать функции slideUp и slideDown для его переключения?

Моя идея заключалась в использовании функции next(), но я думаю, что существует более общий способ сделать это.

Заранее благодарен!

Answer 1

Ну, .next() на самом деле идеально

$('.do').on('click', function() { 
    $(this).next('ul').slideToggle().find('ul:visible').slideUp(); // According to your comment; hide all the visible successors of type ul. 
    $(this).text($(this).text() == '+' ? '-' : '+'); // Alter the caption (which I guess you want to do as well) :-) 
}); 

EDIT: Добавлено скрытие для всех дочерних ул, совпадающее Ваш комментарий.

Answer 2

Вы можете использовать .next() метод JQuery

Пример:

$(".do").click(function() { 
    $(this).next("ul").slideToggle() 
}); 

Answer 3

Попробуйте

$(".do").click(function() { 
    $(this).next().closest("ul").slideToggle(); 
}); 

FIDDLE