[英]Jquery simple accordion
I have simple Jquery accordion, but I have problem of changing header color when tab is opened 我有简单的Jquery手风琴,但是打开选项卡时有更改标题颜色的问题
Here is my code 这是我的代码
HTML 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 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 CSS
header{
background-color:green;
}
.active{
background-color:red;
}
.active-header-color{
background-color:blue;
}
What I need when some content is show to add class to that header? 当显示一些内容以将类添加到该标头时,我需要什么? Here is working fiddle https://jsfiddle.net/7hLzqoxe/4/
这是工作提琴https://jsfiddle.net/7hLzqoxe/4/
here is my fiddle. 这是我的小提琴。 refer to it
引用它
All you needed to do was add display:inline-block
to <a>
element since it is inline element. 您需要做的就是将
display:inline-block
添加到<a>
元素,因为它是内联元素。
https://jsfiddle.net/7hLzqoxe/5/ https://jsfiddle.net/7hLzqoxe/5/
This was the main part that needed a change 这是需要改变的主要部分
$('.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;
});
updated JS Fiddle https://jsfiddle.net/7hLzqoxe/6/ 更新了JS Fiddle https://jsfiddle.net/7hLzqoxe/6/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.