初期状態の折りたたみパネル

Question

折りたたみパネルが折りたたまれた（または折りたたまれていない）初期状態で動作しようとしています。初期状態の機能がなければうまくいきますが、私がそれを導入すると、最初のクリックはうっかりしていて、インジケータアイコンは反転しています。私はこれが単なる論理パズルであると確信しています。私ははっきりと見逃していますが、実際は私は困惑しています。

jQueryとブートストラップの使用。コードはこのポストの目的のためにわずかに変更されています。なぜなら、それは独自の関数（通常はTypeScriptのエクスポート関数ですが、ここでは問題ありません）であり、アイコンはアイコンフォントを使用しています。 ' 簡単にするために。

パネルが折りたたまれているときは「アイコン」を指し、展開したときは上を指すはずです（クリックしたときにどのような動作が起こるかを示します（現在の状態を示していますエンジニアやデザイナー、笑！）私はそれが状態が折りたたまれている初期ですので、ターゲットに「崩壊」のクラスを適用できるようにする必要があります。

http://codepen.io/sinrise/pen/eBoNPE

HTML

<div class="container" style="padding-top: 30px;"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="panel panel-default"> 
     <div class="panel-heading collapse-header" data-target="#test-panel1">Heading</div> 
     <div class="panel-body collapsed" id="test-panel1"> 
      <p>some content</p> 
     </div> 
     </div> 
     <div class="panel panel-default"> 
     <div class="panel-heading collapse-header" data-target="#test-panel2">Heading</div> 
     <div class="panel-body" id="test-panel2"> 
      <p>some content</p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

CSS

.collapse-header + .collapsed { display: none; } 

.collapse-header { 
    position: relative; 
    &:hover { cursor: pointer; } 
    &:after { 
     position: absolute; 
     font-family: "Sans-serif"; 
     content: "^"; 
     transform: rotateZ(0deg); 
     right: 15px; 
     transition: all 0.5s linear; 
    } 
    &.rotate-icon { 
     &:after { 
      transform: rotateZ(180deg); 
      transition: all 0.5s linear; 
     } 
    } 
} 

JS/jQueryの

function setCollapsableHeaders() { 
    $.each($(".collapse-header"), function() { 
     var $this = $(this); 
     var tar = $($this.attr("data-target")); 
     $this.on("click", function() { 
      $this.toggleClass("rotate-icon"); 
      tar.toggleClass("collapsed"); 
      tar.animate({ 
       height: "toggle", 
       paddingTop: "toggle", 
       paddingBottom: "toggle" 
      }, 500, function() { 
      }); 
     }); 
    }); 
}; 

$(function(){ 
    setCollapsableHeaders(); 
}); 

Answer 1

あなたが期待しているように、それはコードにちょうど小さな変化でした。 :)ここ

が働い1である（アイコンを除いて、あなたが好きなアイコン配置する必要があります） http://codepen.io/anon/pen/ZBZbEa

、ここでは、基準

function setCollapsableHeaders() { 
$.each($(".collapse-header"), function() { 
    var $this = $(this); 
    var tar = $($this.attr("data-target")); 
    $this.on("click", function() { 
     $this.toggleClass("rotate-icon"); 
     //tar.toggleClass("collapsed"); 
     tar.animate({ 
      height: "toggle", 
      paddingTop: "toggle", 
      paddingBottom: "toggle" 
     }, 500, function() { 
     }); 
    }); 
}); 
}; 

$(function(){ 
     setCollapsableHeaders(); 
}); 

ため、全体のスニペットでのみこれを変更するには最初に、あなたは、ロジックをめちゃくちゃにして、鼎コードと同じことを、ので、あなたFiをされたこのコメント行

//tar.toggleClass("collapsed"); 

であるため、最初のクリックは実際に正しいクラス（追加または削除されたクラス）を設定していました。その後のクリックは問題ありませんでした。あなたの入力のためのみんなに

ありがとう：

は、私は、これは

Answer 2

ソリューションに役立ちます願っています。それは私がこれを解決する方法を理解するのに役立ちました。だからアイコンのことは混乱を招いた。私はグリフコンシェブロンを使用しています。だから私が代わりにしたのは、いくつかのCSSクラスを作成することでした：

.collapse-icon-up:after { 
    content: "\E602"; 
} 

.collapse-icon-down:after { 
    content: "\E601"; 
} 

初期状態によって異なるグリフコンを使用します。これは私のjsとCSSアニメーションのトグルでうまくいきます。私はコメントしました：

tar.toggleClass("collapsed"); 

がMohammed ElSayedによって提案されました。ありがとう:)

それから私は、コメントを追加しました：

if (tar.hasClass("collapsed")) { 
    $this.addClass("collapse-icon-down"); 
} else { 
    $this.addClass("collapse-icon-up"); 
} 

をjsのために、各ループのアイコンの初期方向を設定するために。

私が疑っていたように、それは単純で論理的なパズルだった。今は完璧に動作しているようです！あなたの助けをもう一度ありがとう！ ：D