jQuery手風琴行爲不當時擴展和收縮

我很難找出手風琴中的一個錯誤。點擊時箭頭圖標行爲異常。如果你去here，你會看到一些手風琴隱藏的類別。當你點擊一個，然後關閉它，它的行爲是正確的。但是，如果您點擊其中一個，然後在關閉第一個點擊之後點擊另一個，您會注意到上面的箭頭已經返回到其「關閉」位置而沒有關閉它。jQuery手風琴行爲不當時擴展和收縮

這裏是構成每個手風琴的HTML：

<dl class="accordion"> 
<dt><strong>Accordion Title:</strong>&nbsp;&nbsp;Details</dt> 
<dd>Hidden details</dd> 
</dl>

的CSS的箭頭：

.accordion dt:after { 
    content: "\f125"; 
    color: #ED4F30; 
    font-family: "Ionicons"; 
    padding-left: 10px; 
}

和

.accordion dt.accordion-active:after { 
    content: "\f123"; 
    color: #ED4F30; 
    font-family: "Ionicons"; 
    padding-left: 10px; 
}

最後jQuery的，我是用於展開/摺疊：

function ($) { 
    //Hide all panels 
    var allPanels = $('.accordion > dd').hide(); 
    //Show first panel 
    //$('.accordion > dd:first-of-type').show(); 
    //Add active class to first panel 
    //$('.accordion > dt:first-of-type').addClass('accordion-active'); 
    //Handle click function 
    jQuery('.accordion > dt').on('click', function() { 
     var $this = $(this) , 
      $target = $this.next(); 
      jQuery('.accordion > dt.accordion-active').not($this.toggleClass('accordion-active')).removeClass('accordion-active'); 
     $this.siblings('dd').not($target.addClass('active').slideToggle()).slideUp(); 
     return false; 
    }); 
}

任何想法我失蹤？

來源

2014-02-06 dotwongdotcom

你的長行與切換（）裏面not（）使這個代碼難以遵循。 – isherwood

它看起來像你過分複雜的一點。您不需要使用「not（）」方法來過濾任何東西。你只能在2個狀態（添加/刪除類，顯示/隱藏元素）之間切換，所以你只需要使用2個jQuery方法，它們已經在你的代碼中。

jQuery('.accordion > dt').on('click', function() { 
    var $this = $(this), 
     $target = $this.next(); 
    $this.toggleClass('accordion-active'); 
    $target.slideToggle(); 
    return false; 
});

下面是根據您所提供的代碼的jsfiddle：http://jsfiddle.net/e5pe5/

讓我知道，如果這是你的手風琴的預期功能。

來源

2014-02-07 04:38:03 lnoogn

完美！感謝@Inoogn這正是我所期待的。我正在修改某個人的代碼，並且讓它過於複雜。乾杯:) – dotwongdotcom

jQuery手風琴行爲不當時擴展和收縮

回答

相關問題