Свернуть все другие предметы аккордеона, когда один из них расширен.

Question

У меня есть меню аккордеона, которое прекрасно работает. Но теперь я хочу, чтобы только один родительский элемент расширялся за раз. Другими словами, когда я нажимаю, чтобы развернуть один родительский элемент, любой другой расширенный родительский элемент должен свернуть. Я думал, что добавление строки, чтобы сместить элементы сиблинга, будет работать, но это не так, или я делаю это неправильно. Есть идеи?

Вот мой jsfiddle

Вот мой код:

CSS 

a 
    { 
     cursor: pointer; 
    } 

.menu ul 
    { 
     list-style: none outside none; 
    } 

.menu li a 
    { 
     line-height: 25px; 
    } 

.menu > ul > li > a 
    { 
     color: #3B4C56; 
     display: block; 
     font-weight: normal; 
     position: relative; 
     text-decoration: none; 
    } 

.menu li.parent > a 
    { 
     padding: 0 0 0 28px; 
    } 

.menu li.parent > a:before 
    { 
     background-image: url("../images/plus_minus_icons.png"); 
     background-position: 25px center; 
     content: ""; 
     display: block; 
     height: 21px; 
     left: 0; 
     position: absolute; 
     top: 2px; 
     vertical-align: middle; 
     width: 23px; 
    } 

.menu ul li.active > a:before 
    { 
     background-position: 0 center; 
    } 

.menu ul li ul 
    { 
     border-left: 1px solid #D9DADB; 
     display: none; 
     margin: 0 0 0 12px; 
     overflow: hidden; 
     padding: 0 0 0 25px; 
    } 

.menu ul li ul li 
    { 
     position: relative; 
    } 

.menu ul li ul li:before 
    { 
     border-bottom: 1px dashed #E2E2E3; 
     content: ""; 
     left: -20px; 
     position: absolute; 
     top: 12px; 
     width: 15px; 
    } 

JQuery

$(document).ready(function() { 
     $('.menu li').each(function() { 
       if($(this).children('ul').length > 0) { 
         $(this).addClass('parent');  
       } 
     }); 

     $('.menu li.parent > a').click(function(event) { 

      if($(this).next('ul').is(':hidden')) 
      { 
       event.preventDefault();    

       $(this).parent().toggleClass('active'); 
       $(this).parent().children('ul').slideDown('fast'); 
       $(this).parent().children.siblings('ul').slideUp('fast'); 
      } 
     }); 

}); 

HTML

<div class="menu"> 
    <ul> 
     <li><a href="http://www.google.com">Menu item 1</a> 
      <ul> 
       <li><a>Menu item 1.1</a></li> 
       <li><a>Menu item 1.2</a> 
        <ul> 
         <li><a>Menu item 1.2.1</a></li> 
         <li><a>Menu item 1.2.2</a></li> 
         <li><a>Menu item 1.2.3</a></li> 
        </ul> 
       </li> 
       <li><a>Menu item 1.3</a></li> 
      </ul> 
     </li> 
     <li><a href="http://www.apple.com">Menu item 2</a> 
      <ul> 
       <li><a>Menu item 2.1</a></li> 
       <li><a>Menu item 2.2</a> 
        <ul> 
         <li><a>Menu item 2.2.1</a></li> 
         <li><a>Menu item 2.2.2</a></li> 
         <li><a>Menu item 2.2.3</a></li> 
        </ul> 
       </li> 
       <li><a>Menu item 2.3</a></li> 
      </ul> 
     </li> 
     <li><a href="http://www.twitter.com">Menu item 3</a> 
      <ul> 
       <li><a>Menu item 1.1</a></li> 
       <li><a>Menu item 1.2</a> 
        <ul> 
         <li><a>Menu item 1.2.1</a></li> 
         <li><a>Menu item 1.2.2</a></li> 
         <li><a>Menu item 1.2.3</a></li> 
        </ul> 
       </li> 
       <li><a>Menu item 1.3</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

Вы должны сделать это дополнение:

$(this).parent().siblings().find('ul').slideUp('fast'); 

Fiddle: http://jsfiddle.net/7gxaprtt/7/