如果手风琴打开或关闭，则交换 jQuery 手风琴的标题答案

【问题标题】：swapping title for jQuery accordion if accordion is opened or closed如果手风琴打开或关闭，则交换 jQuery 手风琴的标题
【发布时间】：2012-10-12 05:55:03
【问题描述】：

我已经完成了 95%（我希望如此）。我正在研究一个手风琴功能，它根据手风琴是打开还是关闭来改变手风琴头部的文本。（我有一个正负图像工作）。

目前如果客户点击手风琴打开和关闭它，标题会正确更改，但如果客户打开不同的手风琴，原来的手风琴会向上滑动，但标题不会更新。我尝试了几个我认为可行的选项，但还没有成功。

我做了一个 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.

希望有人可以提供帮助。

【问题讨论】：

标签： javascript jquery html accordion

【解决方案1】：

您可以在折叠循环期间通过删除 head.html($showMore) 并更改来重写标题

$(this).parent().find('.accordion-head').toggleClass('accordion-open');

到

$(this).parent().find('.accordion-head').toggleClass('accordion-open').html($showMore);

【讨论】：

【解决方案2】：

您也可以在点击函数中插入$('.accordion-head').html($showMore);，这将首先更新所有标题以显示更多，然后根据条件更新各个标题。
var $showMore = "显示更多";
var $hideContent = "隐藏此优惠";
$('.accordion-head').html($showMore);
content.addClass('实际');

【讨论】：

这太棒了，我想为标题设置一个默认值，这样就可以了。