我有简单的Jquery手风琴,但是打开选项卡时有更改标题颜色的问题
这是我的代码
的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;
}
当显示一些内容以将类添加到该标头时,我需要什么?
这是工作提琴
https://jsfiddle.net/7hLzqoxe/4/
最佳答案
这是我的小提琴。
引用它
您需要做的就是将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/