對jQuery Accordion稍作調整

Question

我在演示中使用了一個基本的jQuery Accordion。我點擊「關於我們」，它會顯示下方的「團隊」鏈接。好極了！

現在，是否有可能讓這個手風琴上班沒有必須在超鏈接中有'item'類？

因此，而不是<a href="/about-us/" class="item">About Us</a>它只是<a href="/about-us/">About Us</a>？我問的原因是目前從WordPress生成的代碼不包括'item'類，因此打破了我的手風琴。

這裏是我的演示：http://jsfiddle.net/h32dj/

而且我的JavaScript：

jQuery(function($) { 

    $('#accordion a.item').click(function (e) { 
    //remove all the "Over" class, so that the arrow reset to default 
    $('#accordion a.item').not(this).each(function() { 
    if ($(this).attr('rel')!='') { 
    $(this).removeClass($(this).attr('rel') + 'Over'); 
    } 
    $(this).siblings('ul').slideUp("slow"); 
    }); 

    //showhide the selected submenu 
    $(this).siblings('ul').slideToggle("slow"); 

    //addremove Over class, so that the arrow pointing downup 
    $(this).toggleClass($(this).attr('rel') + 'Over'); 
    e.preventDefault(); 
    }); 

}); 

這裏任何指針:)感謝

Answer 1

那麼，讓我們來分析一下item類是如何使用這個腳本。據我所知，需要以某種方式區分第一級錨（手風琴窗格）和第二級錨（內容）。如果您需要刪除此課程，那麼您需要其他方法。例如，您可以依賴標記和標記層次結構。具體而言，而不是由類選擇的：

'#accordion a.item' 

使用選擇按層次結構：

'#accordion > li > a' 

這裏是demo。

Answer 2

沒有項目類，它會沿着線工作：

jQuery(function($) { 

    $('#accordion > li > a').click(function (e) { 
    //remove all the "Over" class, so that the arrow reset to default 
     $('#accordion a').not(this).each(function() { 
      if ($(this).attr('rel')!='') { 
       $(this).removeClass($(this).attr('rel') + 'Over'); 
      } 
     $(this).siblings('ul').slideUp("slow"); 
    }); 

    //showhide the selected submenu 
    $(this).siblings('ul').slideToggle("slow"); 

    //addremove Over class, so that the arrow pointing downup 
    $(this).toggleClass($(this).attr('rel') + 'Over'); 
     e.preventDefault(); 
    }); 

}); 

Link to jsfiddle