Простые вложенные расширяемые столбцы (jQuery)

Question

У меня возникли проблемы с попыткой получить простой вложенный набор расширяемых областей содержимого. Если вы нажмете «Курсы управления проектами», затем нажмите «Род занятий» (например, «ИТ-курсы»), затем «Курсы по управлению проектами» должны быть закрыты, и «ИТ-курсы» должны открыться.

Это должно работать, когда вложенные (т.е. братья близко, то выбранный один открывается. Любая помощь приветствуется!

JSFiddle

HTML

<span class="ui-expand-bar large icon person"><span class="head">Project Management Courses</span></span> 
      <div class="content"> 
       <span class="ui-expand-bar small"><span class="head">Adobe</span></span> 
       <div class="content"> 
        <table class="plain bullet course-categories"> 
         <tr> 
          <td style="width:45%;">Microsoft Excel Level 1</td> 
          <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td> 
          <td style="width:30%;"><a href="#">View online detail</a></td> 
          <td style="width:10%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td> 
         </tr> 
         <tr> 
          <td style="width:45%;">Microsoft Excel Level 1</td> 
          <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td> 
          <td style="width:25%;"><a href="#">View online detail</a></td> 
          <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td> 
         </tr> 
         <tr> 
          <td style="width:45%;">Microsoft Excel Level 1</td> 
          <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td> 
          <td style="width:25%;"><a href="#">View online detail</a></td> 
          <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td> 
         </tr> 
         <tr> 
          <td style="width:45%;">Microsoft Excel Level 1</td> 
          <td style="width:15%;" class="highlight center"><a href="#">View detail</a></td> 
          <td style="width:25%;"><a href="#">View online detail</a></td> 
          <td style="width:15%;" class="right"><a class="ui-icon-link-plus" href="/">View</a></td> 
         </tr> 
        </table> 
       </div> 
       <span class="ui-expand-bar open small"><span class="head">Microsoft</span><span class="ui-link-minus">Close</span></span> 
      </div> 
      <span class="ui-expand-bar large icon computer"><span class="head">IT Courses</span></span> 
      <span class="ui-expand-bar large icon cog"><span class="head">Business Skills Courses</span></span> 
      <span class="ui-expand-bar large icon person"><span class="head">ELC Re-Settlement Courses</span></span> 
      <span class="ui-expand-bar large icon sliders"><span class="head">On-line training Courses</span></span> 

JQuery

$('.ui-expand-bar').click(function(event) { 
     $this = $(this); 
     $this.siblings().find('.content').stop().slideUp('200'); 
     $this.siblings().removeClass('open');   

     if(!$this.hasClass('open')){ 
      $this.siblings('.ui-expand-bar').find('.content').stop().slideUp('200'); 
      $this.addClass('open'); 
      $this.next('.content').stop().slideDown('200'); 
     } 
    }); 

Answer 1

Вот что вы хотите

Код:

$('.ui-expand-bar').click(function(event) { 
    $this = $(this); 
    if($(this).parent('.content').length == 0){  
    $('.content').stop().slideUp('200'); 
    $this.next('.content').stop().slideToggle('200'); 
    }else{ 
    $this.next('.content').stop().slideToggle('200'); 
    } 
    }); 

Jsfiddle http://jsfiddle.net/krunalp1993/BfuZc/3/

Надеется, что это помогает :)

Answer 2

посмотри на это:

$('.ui-expand-bar').click(function(event) { 
     $this = $(this); 
     //if this not open 
     if(!$this.hasClass('open')){ 
      //close all other siblings 
      $this.siblings('.open').removeClass('open'); 
      $this.siblings('.content').stop().slideUp('200'); 
      //open this 
      $this.addClass('open'); 
      $this.next('.content').stop().slideDown('200'); 
     } 
     else { 
      //thisis open, close it 
      $this.removeClass('open'); 
      $this.next('.content').stop().slideUp('200'); 
     } 
    }); 

http://jsfiddle.net/BfuZc/4/ я модифицировал HTML и JS