39

私は自分の質問に関連するすべての質問を読みましたが、それらをすべて試してみましたが、役に立ちませんでした。私が書いたほとんどすべてのコードは、このサイトに投稿されたソリューションと同じだと「思っている」にもかかわらず、コードを機能させることができないようです。

HTMLコードは次のとおりです。

<div class="press-title">
  <p class="text" data-toggle="collapse" data-target="#serviceList">
    <span id="servicesButton" data-toggle="tooltip " data-original-title="Click Me!">
      <span class="servicedrop glyphicon glyphicon-chevron-down"></span> Services Offered <span class="servicedrop glyphicon glyphicon-chevron-down"></span>
    </span>
  </p>
</div>
<div id="serviceList" class="collapse">
  <div class="row featurette">
  ...

ここにJQueryがあります

$('#serviceList').on('shown.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  }

$('#serviceList').on('hidden.bs.collapse'), function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  }

要素を折りたたむと、アイコンを下から上に変更したいだけです。次に、同じクラスをクリックすると元に戻ります。私は本当にこれにこだわっています。前もって感謝します！

4

12 に答える 12

141

純粋な CSS。

HTML 部分:

   <a data-toggle="collapse" href="#collapseExample" 
      aria-expanded="false" aria-controls="collapseExample">
        Open/Close collapse
        <i class="fa fa-chevron-right pull-right"></i>
        <i class="fa fa-chevron-down pull-right"></i>
    </a>

ここで重要な要素は aria-expanded="false" または "true" です

CSS:

a[aria-expanded=true] .fa-chevron-right {
   display: none;
}
a[aria-expanded=false] .fa-chevron-down {
   display: none;
}
于 2015-11-03T10:36:06.437 に答える
25

問題は、jQuery コードが正しくないことです。

この行の早い段階でイベント ハンドラー関数を閉じています。

$('#serviceList').on('shown.bs.collapse'), function() {

2 番目の閉じ括弧が見えますか? これは、「on」機能を早期に閉じています。jQuery を次のように変更してみてください。

$('#serviceList').on('shown.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
  });

$('#serviceList').on('hidden.bs.collapse', function() {
    $(".servicedrop").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
  });
于 2013-09-26T09:35:06.430 に答える
2

これを試すことができます。

HTMLコードは次のとおりです。

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> Collapsible Group Item #1<span class="glyphicon glyphicon-chevron-up"></span> </a>

ここにJQueryがあります

$('#accordion').on('shown.bs.collapse hidden.bs.collapse', function (e) {
         $(e.target).prev('.panel-heading').find("span.glyphicon").toggleClass('glyphicon-chevron-up glyphicon-chevron-down',200, "easeOutSine" );
});
于 2015-06-02T16:17:29.650 に答える
1

HTML/CSSを変更する問題を修正

HTML:

<a data-toggle="collapse" href="#doc" class="yt-toggle collapsed">View Doc 
    <i class="fa fa-caret-right fa-fw"></i> 
    <i class="fa fa-caret-down fa-fw"></i>
</a>

CSS:

.yt-toggle.collapsed .fa-caret-down {
  display: none;
}

.yt-toggle.collapsed .fa-caret-right {
  display: inline-block;
}

.yt-toggle .fa-caret-right {
  display: none;
}
于 2014-04-18T16:13:22.997 に答える