web-dev-qa-db-ja.com

デフォルトではdivを非表示にし、クリック時にbootstrapで表示します

divを表示および非表示にしますが、デフォルトで非表示にし、クリック時に表示および非表示にできるようにします。これが私が作ったコードです：

<a class="button" onclick="$('#target').toggle();">
 <i class="fa fa-level-down"></i>
</a>

<div id="target"> 
 Hello world... 
</div>
javascriptjqueryhtmlcsstwitter-bootstrap
58
Ouda

style="display:none";に水<div>を追加するだけです

私が言うフィドル： http://jsfiddle.net/krY56/13/

jQuery：

function toggler(divId) {
    $("#" + divId).toggle();
}

CSSクラス.hiddenを持つことが望ましい

.hidden {
     display:none;
}
21
Ali Gajani

ここでは、Bootstrapフレームワークの組み込み機能のみを使用してこれを行う方法を提案します。

  1. ターゲットdivにIDがあることを確認する必要があります。
  2. ブートストラップにはclassの「折りたたみ」があり、これはデフォルトでブロックを非表示にします。 divを折りたたみ可能にし、デフォルトで表示する場合は、折りたたみに「in」クラスを追加する必要があります。そうしないと、トグル動作が正しく機能しません。
  3. 次に、ハイパーリンク（ボタンでも機能します）で、ターゲットdivを指すhref属性を追加します。
  4. 最後に、属性data-toggle="collapse"を追加して、Bootstrapにこのタグに適切なトグルスクリプトを追加するよう指示します。

既にBootstrapフレームワークが含まれているページに直接コピーアンドペーストできるコードサンプルを次に示します。

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<button href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</button>
<div id="Foo" class="collapse">
    This div (Foo) is hidden by default
</div>
<div id="Bar" class="collapse in">
    This div (Bar) is shown by default and can toggle
</div>
246
CowWarrior

これを試してください：

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>
14
Anil Bhattarai100

この質問は少し古く、Google検索で同様の問題が表示されるので、@ CowWarriorの回答の上にもう少し詳しく説明すると思います。似たようなソリューションを探していましたが、無数のSO質問/回答とBootstrapドキュメントを精査した後、ソリューションは非常に簡単でした。繰り返しますが、これは組み込みのBootstrap collapseクラスを使用して、divとBootstrapの「Collapse Event」を表示/非表示にします。

私が気づいたのは、Bootstrap Accordionを使用して簡単に実行できることですが、ほとんどの場合、必要な機能はAccordionに「多少」似ていますが、望む方法が異なります。 navbarのメニューボタンに基づいて、たとえば、<div>を非表示にするには。以下は、これに対する簡単な解決策です。アンカータグ（<a>）はnavbarアイテムであり、折りたたみイベントに基づいて、対応するdivが既存のdivを置き換えます。 CodeSnippetでは少し見栄えが悪いように見えますが、機能を実現するにはかなり近づいています。

JavaScriptが行うことは、他のすべての<div>を非表示にすることだけです

$(".main-container.collapse").not($(this)).collapse('hide');

collapseイベント<div>をチェックして、ロードされたshown.bs.collapseが表示されるとき。これがBootstrap documentation on Collapseイベントです。

注：main-containerは単なるカスタムクラスです。

ここに行く-

$(".main-container.collapse").on('shown.bs.collapse', function () {    
//when a collapsed div is shown hide all other collapsible divs that are visible
       $(".main-container.collapse").not($(this)).collapse('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#Foo" class="btn btn-default" data-toggle="collapse">Toggle Foo</a>
<a href="#Bar" class="btn btn-default" data-toggle="collapse">Toggle Bar</a>

<div id="Bar" class="main-container collapse in">
    This div (#Bar) is shown by default and can toggle
</div>
<div id="Foo" class="main-container collapse">
    This div (#Foo) is hidden by default
</div>
5
Annjawn