webentwicklung-frage-antwort-db.com.de

Div standardmäßig ausblenden und mit bootstrap anzeigen

Ich möchte ein div ein- und ausblenden, aber ich möchte, dass es standardmäßig ausgeblendet ist und beim Klicken ein- und ausgeblendet wird. Hier ist der Code, den ich gemacht habe:

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

<div id="target"> 
 Hello world... 
</div>
59
Ouda

Nur Wasser hinzufügen style="display:none"; zum <div>

Geigen Ich sage: http://jsfiddle.net/krY56/13/

jQuery:

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

Bevorzugen Sie eine CSS-Klasse .hidden

.hidden {
     display:none;
}
21
Ali Gajani

Hier schlage ich eine Möglichkeit vor, dies ausschließlich mithilfe der integrierten Funktionalität des Bootstrap Frameworks zu tun.

  1. Sie müssen sicherstellen, dass das Ziel div eine ID hat.
  2. Bootstrap hat einen class "Zusammenbruch", dies wird Ihren Block standardmäßig verbergen. Wenn Sie möchten, dass Ihr div zusammenklappbar ist UND standardmäßig angezeigt wird, müssen Sie "in" -Klasse zum Zusammenklappen hinzufügen. Andernfalls funktioniert das Umschaltverhalten nicht ordnungsgemäß.
  3. Fügen Sie dann in Ihrem Hyperlink (funktioniert auch für Schaltflächen) ein href-Attribut hinzu, das auf Ihr Ziel-Div verweist.
  4. Fügen Sie abschließend das Attribut data-toggle="collapse" Hinzu, um Bootstrap) anzuweisen, diesem Tag ein entsprechendes Umschaltskript hinzuzufügen.

Hier ist ein Codebeispiel, das direkt auf einer Seite eingefügt werden kann, die bereits das Bootstrap Framework enthält:

<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>
249
CowWarrior

Probier diese:

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

Mir ist klar, dass diese Frage etwas veraltet ist, und da sie bei der Google-Suche nach ähnlichen Problemen auftaucht, dachte ich, ich werde sie über die Antwort von @ CowWarrior hinaus etwas ausführlicher behandeln. Ich suchte nach einer ähnlichen Lösung, und nachdem ich unzählige SO question/answers und Bootstrap documentations durchgesehen hatte, war die Lösung ziemlich einfach eingebaute Bootstrap collapse Klasse zum Ein-/Ausblenden von Divs und Bootstraps "Collapse Event".

Was mir aufgefallen ist, dass es mit einem Bootstrap Akkordeon einfach ist, aber die meiste Zeit, obwohl die erforderliche Funktionalität "etwas" ähnlich wie bei einem Akkordeon ist, ist es in gewisser Weise anders man möchte ausblenden <div> auf der Basis von beispielsweise Menüschaltflächen auf einem navbar. Unten ist eine einfache Lösung dafür. Die Anker-Tags (<a>) könnten sein Elemente in der Navigationsleiste und basierend auf einem Einklappereignis ersetzt das entsprechende Div das vorhandene Div. Es sieht in CodeSnippet etwas schlampig aus, ist aber der Erreichung der Funktionalität ziemlich nahe.

Alles, was das JavaScript macht, ist, dass alle anderen <div> Mit ausgeblendet werden

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

wenn der geladene <div> angezeigt wird, aktivieren Sie das Collapse-Ereignis shown.bs.collapse. Hier ist das Bootstrap Dokumentation bei Collapse Event.

Hinweis: main-container Ist nur eine benutzerdefinierte Klasse.

Hier kommt's-

$(".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