0

ブートストラップ アコーディオンを使用して質問のリストを表示し、プラス アイコンをクリックすると、下にスライドして答えが表示されます。私が達成しようとしているのは、アコーディオンが拡大して答えが明らかになったときに、プラスアイコンをマイナスに変更することです（スプライトを作成しました）これまでのところ、画像は変わりません

意見

<div id="accordion" class="accordion in collapse">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a href="#collapseOne" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle collapsed">Question1</a>
    </div>
    <!--End of Accordion heading-->
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;">
      <div class="accordion-inner">Answer to Question 1.</div>
      <!--End of accordion Inner-->
    </div>
    <!--End of collapseOne-->
  </div>
  <!--End of accordion-group-->
</div>

CSS

.accordion .accordion-toggle, .toggle-box a {
background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
color: #666666;
display: block;
font-size: 18px;
height: 25px;
line-height: 23px;
padding: 10px 20px 10px 40px;
}

.accordion a.collapsed, .toggle-box .collapsed {
background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent;
}

トグルステータスでクラスを変更するこのjqueryがあります

$('.accordion').collapse();
$('.accordion').on('shown', function () {
    var $aGroup = $('.accordion-group');
    $aGroup.find('.accordion-body').not(".in").prev('.accordion-heading').children("a").addClass('collapsed');

  })

しかし、これはうまくいきません。私のJqueryは、おそらくここでいくつかの間違いを犯したことに限定されています。誰かが私が間違ったことを指摘できますか。診断を容易にするためにフィドルをまとめようとしましたが、アコーディオン js を引き込みませんか?

どんな助けでも大歓迎

4

1 に答える 1

2

.collapsed クラスを切り替える代わりに (折りたたまれた div を開くことができるため、プラス アイコンがあると思います)、プラス アイコンをデフォルトのスプライトとして使用し、代わりに .opened というクラスを追加/削除する必要があります。その .opened クラスにはマイナス記号が付きます。また、.accordion-body をターゲットにする方が簡単だと思います。これを行う方法の例を次に示します。

脚本：

$('.accordion-body').on('show',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .addClass('opened');
    });
$('.accordion-body').on('hide',function(){
     $(this).siblings('.accordion-heading').find('.accordion-toggle')
       .removeClass('opened');
 });

スタイル：

/* Class below should have plus sign */
.accordion-toggle {
    background: url("/assets/collapse_btn.png") no-repeat scroll left 10px transparent;
    color: #666666;
    display: block;
    font-size: 18px;
    height: 25px;
    line-height: 23px;
    padding: 10px 20px 10px 40px;
}
/* Class below should have minus sign */
.accordion-toggle.opened {
    background: url("/assets/collapse_btn.png") no-repeat scroll left -58px transparent; 
}

このコードを自分のプラス/マイナス アイコンを使用してローカルでテストしたところ、うまくいきました。

*クラスの名前が間違っていて、.collapsed にマイナスが付いている場合は、上記の open の代わりに collapsed を使用できます。

于 2013-01-28T23:32:16.303 に答える