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

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



<a class="button" onclick="$('#target').toggle();">

 <i class="fa fa-level-down"></i>

</a>



<div id="target"> 

 Hello world... 

</div>
820   4  

4 ответов:

Просто добавь воды style="display:none"; до <div>

скрипки я говорю:http://jsfiddle.net/krY56/13/

jQuery:

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

предпочитал иметь класс CSS .hidden

.hidden {
     display:none;
}
21  
2014-05-26 18:05:10

здесь я предлагаю способ сделать это исключительно с помощью встроенной функциональности Bootstrap framework.

  1. вы должны убедиться, что элемент div есть ID.
  2. Bootstrap имеет class "свернуть", это скроет ваш блок по умолчанию. Если вы хотите, чтобы ваш div был складным и отображался по умолчанию вам нужно добавить класс "in" в коллапс. В противном случае переключение поведения не будет работать должным образом.
  3. затем, по вашей гиперссылке (также работает для кнопки), Добавить href атрибут, который указывает на целевой див.
  4. наконец, добавьте атрибут data-toggle="collapse" для того чтобы проинструктировать Bootstrap, чтобы добавить соответствующий сценарий переключения к этому тегу.

вот пример кода, который может быть скопирован непосредственно на страницу, которая уже включает в себя Bootstrap framework:

<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>
238  
2016-05-14 10:59:13

попробуй это:

<button class="button" onclick="$('#target').toggle();">
    Show/Hide
</button>
<div id="target" style="display: none">
    Hide show.....
</div>
13  
2016-02-22 20:38:30

Я понимаю, что этот вопрос немного устарел, и поскольку он появляется в поиске Google по аналогичной проблеме, я подумал, что немного расширю ответ @CowWarrior. Я искал несколько похожее решение, и после просмотра бесчисленных вопросов/ответов SO и загрузочных документов решение было довольно простым. Опять же, это будет использовать встроенный Bootstrap collapse класс, чтобы показать / скрыть divs и Bootstrap "свернуть событие".

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

все, что делает JavaScript, это делает все остальные <div> скрыть с помощью

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

когда загружается <div> отображается при проверке события свернуть shown.bs.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>
4  
2017-04-20 00:00:26

Comments

    Ничего не найдено.
Click here to cancel reply.