在手風琴列表中如何在子元素上發生單擊時打開單擊並關閉其他手勢？

Question

我有一個手風琴列表，標題內的每一個都有一個觸發手風琴打開/關閉的圖標（圖標並不總是accordion_header的第一個孩子）。 如何打開所選的一個並通過單擊該圖標關閉所有其他人。 手風琴在屬性data-state =“open”時打開。 謝謝！

HTML

<div class="accordion" data-state="close">
 <div class="accordion_header">
  <span class="icon-arrow"></span>
  other stuff..
 </div>
 <div class="accordion_panel">
  <p>Accordion content</p>
 </div>
</div>

SCSS

.accordion_panel {
 display:none;
 .accordion[data-state="open"] & {
  display:block;
 }
}

我想知道js實現目標的最佳方式。 還有一些提示進行過渡，因為我不能使用顯示哪個是創建平滑過渡的最佳選擇？ 謝謝！

Answer 1

使用jQuery

你可以用這個：

的jsfiddle

if(false == $(this).next().is(':visible')) {

        // Slide the answer up

        $('.content .accordion span').slideUp(300);
    }

    // Toggle the slide of the next element to the question

    $(this).next().slideToggle(300);

    // Remove current class from the previous accordion container

if( !$( this ).parent().hasClass( 'current' ) )
{
    $('.content .accordion.current').removeClass('current');
  // Remove current class from the current accordion container
  $(this).parent().addClass('current');
} else {
    $('.content .accordion.current').removeClass('current');
  // Remove current class from the current accordion container
}

還有一個選擇是：

來自css-tricks的鏈接