我已经完成了 95%(我希望如此)。我正在开发一个 Accordion 功能,该功能可以根据 Accordion 打开或关闭来更改 Accordion 头部的文本。 (我有正负图像工作)。
目前,如果客户端单击 Accordion 打开和关闭它,标题会正确更改,但如果客户端打开不同的 Accordion ,原始 Accordion 将向上滑动,但标题不会更新。我尝试了一些我认为可行的选择,但尚未成功。
我做了一个jsfiddle here
jquery 是:
$(document).ready(function() {
// accordion functionality
$('.accordion-head').click(function(e){
var content = $(this).parent().find('.accordion-content');
var head = $(this).parent().find('.accordion-head');
var $showMore = "Show me more";
var $hideContent = "Hide this offer";
content.addClass('actual');
$('.accordion-content').not('.actual').each(function(){
if ($(this).hasClass('accordion-opened')){
$(this).slideUp(200,function(){
$(this).toggleClass('accordion-opened');
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
});
}
});
$(this).toggleClass('accordion-open');
content.removeClass('actual');
if($(this).hasClass('accordion-open')){
content.slideDown(200,function(){
content.toggleClass('accordion-opened');
head.html($hideContent);
});
}else{
content.slideUp(200,function(){
content.toggleClass('accordion-opened');
head.html($showMore);
});
}
e.preventDefault();
});
});
HTML 看起来像这样:
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including Thames Water, Severn Trent, Anglian Water, Yorkshire Water and many more, plus all council tax local authorities. Cashback on mortgage payments up to maximum monthly mortgage payment of £1,000.
</div>
</div>
<span class="spacer"></span>
<div class="accordion">
<div class="accordion-head">
<a href="#">
<span class="accordion-heading">Show me more</span>
</a>
</div>
<div class="accordion-content">
Including British Gas, SSE, EDF Energy, E.ON, npower and many more.
</div>
</div>
<span class="spacer"></span>
etc.
希望有人能帮忙。
最佳答案
您可以通过删除 head.html($showMore)
并更改来在折叠循环期间重写 header
$(this).parent().find('.accordion-head').toggleClass('accordion-open');
至
$(this).parent().find('.accordion-head').toggleClass('accordion-open').html($showMore);
关于javascript - 如果打开或关闭 Accordion ,则交换 jQuery Accordion 的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13011156/