新しいタブでjqueryアコーディオンが崩壊する

Question

次のタブをクリックしてアコーデオンを崩壊させようとしていますが、問題が発生しています。私はコードが正しいと信じて、タブが開きます。タブ2をクリックすると、タブ1が開いたままになります。

また、タブが開いている場合は、矢印が下を指していません。

HTML

<ul class="aside-nav d-all grey-border "> 
      <li class="aside-open-close active"> 
       <a class="aside-opener" href="#">tab1</a> 
       <div class="slide"> 
        content 
       </div> 
      </li> 
      <li class="aside-open-close "> 
       <a class="aside-opener" href="#">tab2</a> 
       <div class="slide"> 
        content 
       </div> 
      </li> 
      <li class="aside-open-close "> 
       <a class="aside-opener" href="#">tab3</a> 
       <div class="slide"> 
        content 
       </div> 
      </li> 
     </ul> 

jQueryの

// open-close init 
function initOpenClose() { 
    jQuery('.open-close, .aside-open-close').openClose({ 
     activeClass: 'active', 
     opener: '.opener, .aside-opener', 
     slider: '.slide', 
     animSpeed: 400, 
     effect: 'slide' 
    }); 
    jQuery('.nav').openClose({ 
     activeClass: 'active', 
     opener: '.nav-opener', 
     slider: '.nav-slide', 
     animSpeed: 400, 
     effect: 'slide' 
    }); 

    jQuery('#nav .drop').each(function(){ 
     var holder = jQuery(this); 
     var opener = holder.children('a'); 
     var drop = holder.children('.drop-holder'); 

     opener.on('click', function(e){ 
      e.preventDefault(); 
      holder.toggleClass('hover'); 
     }); 

     jQuery('body').on('click', function(e){ 
      if(holder.hasClass('hover') && !jQuery(e.target).closest(holder).length) holder.removeClass('hover') 
     }); 
    }); 
} 

Answer 1

あなたがアコーディオンのようにあなたの[UL]タグを設定した場合には、この

$('.aside-nav').accordion(); 

0の追加罰金

の作品

Working fiddle