it-swarm.com.ru

По умолчанию скрыть div и показать его при нажатии bootstrap

Я хочу показать и скрыть div, но я хочу, чтобы он был скрыт по умолчанию и чтобы можно было отображать и скрывать его по клику. Вот код, который я сделал:

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

<div id="target"> 
 Hello world... 
</div>
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 есть идентификатор.
  2. Bootstrap имеет class "collapse", по умолчанию ваш блок будет скрыт. Если вы хотите, чтобы ваш div был разборным и показывался по умолчанию, вам нужно добавить класс "in" к свертку. В противном случае поведение переключения не будет работать должным образом.
  3. Затем в вашей гиперссылке (также работает для кнопок) добавьте атрибут href, который указывает на ваш целевой div.
  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 для отображения/скрытия divs и Bootstrap "Collapse Event".

Я понял, что это легко сделать с помощью Bootstrap Аккордеона, но большую часть времени, даже несмотря на то, что требуемая функциональность "чем-то" похожа на Аккордеон, он отличается от желаемого показать скрыть <div> на основе, скажем, кнопок меню на navbar. Ниже приведено простое решение этого. Теги привязки (<a>) могут быть элементами навигационной панели, и в зависимости от события коллапса соответствующий div заменит существующий div. В CodeSnippet он выглядит немного неряшливо, но он довольно близок к достижению функциональности.

Все, что делает JavaScript, это делает все остальные <div> скрытыми, используя

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

когда загруженный <div> отображается путем проверки события Collapse shown.bs.collapse. Вот Bootstrap документация для события 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