web-dev-qa-db-ja.com

Bootstrap data-toggleは、最初ではなく2回目のクリック後にdivを折りたたむ

簡単な例 with Bootstrapで、クリックしてdivを切り替えます。マークアップは次のとおりです。

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

ユーザークリックが「Open！」というタイトルでリンクしている場合基になるdivが展開または折りたたまれます。 Divは最初に展開され、ユーザーが最初にクリックしたときは効果がありません。次に、ユーザーが2回クリックすると、divが折りたたまれます。

元の例 では、divは最初は折りたたまれていますが、開いてほしいです。どうすれば問題を解決できますか？

htmlcsstwitter-bootstraptoggle
7
Pupkin

Class = "accordion-body"にクラス 'collaspein'を追加するだけです。

[〜＃〜] codepen [〜＃〜] でサンプルコードを確認してください

HTML：

<div class="accordion-heading">
    <a class="accordion-toggle"
       data-toggle="collapse"
       data-parent="#accordion2"
       href="#collapseOne">Open!</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
    <div class="span6">
        <div class="well well-small">
            <div class="accordion-toggle">
                ...some text...
            </div>
        </div>
    </div>
    <div class="span2"></div>                            
</div>

これで問題が解決することを願っています。楽しい ：）

15
Jyoti Pathania
<div id="collapseOne" class="accordion-body collapse">

これにより、デフォルトで閉じ、クリックすると開きます。

0
Nizamudheen At

bootstrap.min.jsを2回呼び出す必要があります。 bootstrapファイルを1回だけ呼び出すようにしてください。Bootstrap with Laravelまたは任意の種類を使用している場合フレームワークの場合、npm run devがbootstrap jsファイルをapp.jsにコンパイルすることを覚えておいてください。そうなる可能性があります。

0
Azamat
<a class="btn btn-primary" data-toggle="collapse" href="#collapsePanel" role="button" aria-expanded="false" aria-controls="collapsePanel">Collapse</a>

<div id="collapsePanel" class="collapse show"><!-- Content Here --></div>

これにより折りたたみ可能になりますが、デフォルトでパネルが表示されます。 [折りたたみ]ボタンをクリックすると、最初のクリックでパネルが折りたたみます。

誰かがどちらかの方法でそれをしようとしている場合にのみ、これをここに追加します。その逆を検索したときにこのリンクを見つけました。それが役に立てば幸い！

0
Blake Neal