2

私はこれで 95% 完了しました (願っています)。アコーディオンが開いているか閉じているかに応じて、アコーディオンの頭のテキストを変更するアコーディオン機能に取り組んでいます。（プラスとマイナスの画像が機能しています）。

現在、クライアントがアコーディオンをクリックして開いたり閉じたりすると、タイトルは正しく変更されますが、クライアントが別のアコーディオンを開くと、元のアコーディオンはスライドアップしますが、タイトルは更新されません。うまくいくと思ったいくつかのオプションを試しましたが、まだ成功していません。

ここでjsfiddleを作成しました

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.

誰かが助けてくれることを願っています。

4

2 に答える 2

2

head.html($showMore)削除して変更することで、折りたたみループ中にヘッダーを書き換えることができます

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

に

$(this).parent().find('.accordion-head').toggleClass('accordion-open').html($showMore);
于 2012-10-22T12:19:52.803 に答える
1

クリック関数内に挿入することもでき$('.accordion-head').html($showMore);ます。これにより、すべてのヘッダーが最初に更新されて詳細が表示され、その後、条件に従って個々のヘッダーが更新されます。
var $showMore = "もっと見せて";
var $hideContent = "このオファーを非表示";
$('.accordion-head').html($showMore);
content.addClass('実際');

于 2012-10-22T12:26:42.920 に答える