javascript - 在 Accordion 列表中当点击发生在子元素上时如何打开点击的并关闭其他的？

Question

我有一个 Accordion 列表，标题内的每个都有一个触发 Accordion 打开/关闭的图标(该图标并不总是 accordion_header 的第一个 child )。我怎样才能打开选定的一个并在点击里面的那个图标时关闭所有其他的。当 Accordion 具有属性 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>

跨界

.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
}

另一种选择是:

link from css-tricks