[英]Jquery simple accordion
我有簡單的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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.