jQuery Accordion Menu Collapse

Question

У меня есть меню аккордеона, которое, когда вы нажимаете на «активную» вкладку, не сворачивается назад. Если вы нажмете любую другую вкладку, предыдущая активная вкладка обрушится нормально ...

Я действительно не могу понять, что не так, я полагаю, функция jQuery.

Я создал jsfiddle для его отладки, но все, что я запустил до сих пор, дает тот же результат.

Любая помощь очень ценится

http://jsfiddle.net/qz52V/1/

HTML:

<div id="accordianSide"> 
<ul> 
    <li> 
     <h3><span class="icon-desktop"></span>Channels We Support</h3> 
     <ul class="sub_Menu"> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li> 
     </ul> 
    </li> 
    <!-- we will keep this LI open by default --> 
    <li> 
     <h3><span class="icon-bar-chart"></span>Market Places</h3> 
     <ul class="sub_Menu"> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Management</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Listing Management</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Order Management</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li> 
     </ul> 
    </li> 
    <li> 
     <h3><span class="icon-credit-card"></span>Paid Search</h3> 
     <ul class="sub_Menu"> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Main Page</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Inventory Driven Search</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Keyword Expansion</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Bid Management</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Search Query Analysis</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Campaign Management</a></li> 
      <li><a href="#"><span class="icon-double-angle-right"></span>Reporting &#038; Analytics</a></li> 
     </ul> 
    </li> 
</ul> 

JQuery:

$(document).ready(function() { 
    $('#accordianSide h3').click(function(){ 
    if ($(this).attr('class') != 'activeAcc'){ 
     $('#accordianSide ul ul').slideUp(); 
     $(this).next().slideToggle(); 
     $('#accordianSide h3').removeClass('activeAcc'); 
     $(this).addClass('activeAcc'); 
    } 
    }); 
}); 

CSS:

#accordianSide { 
background: #fff; 
width: 230px; 
color: #000; 
font-family: 'Open Sans', arial, verdana; 
} 

/*heading styles*/ 
#accordianSide h3 { 
font-size: 12px; 
line-height: 50px; 
padding: 0 10px; 
cursor: pointer; 
background: #fff; 
} 
/*heading hover effect*/ 
#accordianSide h3:hover { 
color:#21abe2; 
background:#f1f1f1; 
} 
/*iconfont styles*/ 
#accordianSide h3 span { 
font-size: 16px; 
margin-right: 10px; 
} 
/*list items*/ 
#accordianSide li { 
list-style-type: none; 
} 
/*links*/ 
#accordianSide ul ul li a { 
color: #000; 
text-decoration: none; 
font-size: 12px; 
line-height: 27px; 
display: block; 
padding: 0 15px; 
transition: all 0.15s; 
} 
/*hover effect on links*/ 
#accordianSide ul ul li a:hover { 
background: #f1f1f1; 
border-left: 5px solid #21abe2; 
color:#21abe2; 
} 
#accordianSide ul ul { 
display: none; 
} 
#accordianSide li.activeAcc ul { 
display: block; 
} 
.activeAcc { 
color:#21abe2; 
} 

Answer 1

Добавьте этот код к вам, если

else { 
    $('#accordianSide ul ul').slideUp(); 
    $('#accordianSide h3').removeClass('activeAcc'); 
} 

Результат

$(document).ready(function() { 
    $('#accordianSide h3').click(function(){ 
    if ($(this).attr('class') != 'activeAcc'){ 
     $('#accordianSide ul ul').slideUp(); 
     $(this).next().slideToggle(); 
     $('#accordianSide h3').removeClass('activeAcc'); 
     $(this).addClass('activeAcc'); 
    } else { 
     $('#accordianSide ul ul').slideUp(); 
     $('#accordianSide h3').removeClass('activeAcc'); 
    } 
    }); 
});