滑動內容

Question

我有滑動菜單內容的工作代碼。

但是我在保持活動狀態時遇到了一些問題，它與懸停狀態相同，當您單擊某個按鈕並單擊該按鈕關閉它時將其關閉。

Here is my working example.

// IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
if($(this).next().is(':hidden') == true) { 
    // ADD THE ON CLASS TO THE BUTTON 
    $(this).addClass('on'); 

    // OPEN THE SLIDE 
    $(this).next().slideDown('normal'); 
} 

Answer 1

嘗試

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
$('.accordionButton').click(function() { 

    //REMOVE THE ON CLASS FROM ALL BUTTONS 
    $('.accordionButton').not(this).removeClass('on'); 

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT 
    if($(this).next().is(':hidden') == true) { 

     //ADD THE ON CLASS TO THE BUTTON 
     $(this).addClass('on'); 

     //OPEN THE SLIDE 
     $(this).next().slideDown('normal'); 
    } 

}); 

演示：Fiddle

Answer 2

這裏是我的解決方案。

//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING) 
    $('.accordionButton').click(function() { 

     //REMOVE THE ON CLASS FROM ALL BUTTONS 
     $('.accordionButton').removeClass('on'); 

     //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES 
     var self = this; 
     $(this).next().slideToggle('normal', function() { 
      $(self).toggleClass('on', $(this).is(':visible'));         
     }); 
    }); 

Try the demo