Jquery 简单的手风琴

Question

我有简单的 Jquery 手风琴，但是当打开选项卡时我无法更改 header 颜色

这是我的代码

HTML

<dl class="accordion-modal">

    <dt><a href=""><header>FIRST</header></a></dt>
            <dd class="active-accordian">FIRST CONTENT</dd>

<dt><a href=""><header>SECOND</header></a></dt>
<dd>SECOND CONTENT</dd>

</dl>

JS

(function($) {

  var allPanels = $('.accordion-modal > dd').hide();
  $('.accordion-modal > .active-accordian').show();

  $('.accordion-modal > dt > a').click(function() {
      $this = $(this);
      $target =  $this.parent().next();

      if(!$target.hasClass('active')){
         allPanels.removeClass('active').slideUp();
         $target.addClass('active').slideDown();
      }

    return false;
  });

})(jQuery);

CSS

header{
    background-color:green;
}

.active{
    background-color:red;
}

.active-header-color{
    background-color:blue;
}

当显示某些内容时，我需要将 class 添加到那个 header？这里正在工作 fiddle https://jsfiddle.net/7hLzqoxe/4/

Answer 1

这是我的 fiddle。参考一下

您需要做的就是将 display:inline-block 添加到 <a> 元素，因为它是内联元素。

https://jsfiddle.net/7hLzqoxe/5/

这是需要更改的主要部分

  $('.accordion-modal > dt > a').click(function () {
                    $(this).children('header').addClass('green');
$(this).parent().siblings().children('a').children('header').removeClass('green');                        //$(this).parent().siblings().children('a').removeClass('green');
                    allPanels.slideUp();
                    $(this).parent().next().slideDown();
                    return false;
                });

更新了 JS Fiddle https://jsfiddle.net/7hLzqoxe/6/

Jquery 简单的手风琴

Jquery simple accordion

javascript

jquery

accordion

jquery-ui-accordion