기본적으로 div를 숨기고 부트스트랩을 사용하여 클릭할 때 표시

기본적으로 div를 숨기고 부트스트랩을 사용하여 클릭할 때 표시

보여주고 싶고 감추고 싶습니다.div, 기본적으로 숨겨서 클릭하면 보여주고 숨길 수 있으면 좋겠습니다.제가 만든 코드는 다음과 같습니다.

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

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

여기서 저는 부트스트랩 프레임워크 내장 기능을 사용하여 이를 독점적으로 수행할 수 있는 방법을 제안합니다.

1. 당신은 목표물이 그 지역에div신분증이 있습니다.
2. 부트스트랩은class"collapse", 이렇게 하면 기본적으로 차단이 숨겨집니다.기본적으로 div를 접을 수 있고 표시하려면 접을 수 있는 클래스에 "in" 클래스를 추가해야 합니다.그렇지 않으면 토글 동작이 제대로 작동하지 않습니다.
3. 그런 다음 하이퍼링크에서 (버튼에도 적용됨) 목표 디바를 가리키는 href 속성을 추가합니다.
4. 마지막으로 속성을 추가합니다.data-toggle="collapse"부트스트랩이 이 태그에 적절한 토글 스크립트를 추가하도록 지시합니다.

다음은 이미 부트스트랩 프레임워크가 포함된 페이지에 직접 복사 붙여넣을 수 있는 코드 샘플입니다(버전 3.4.1까지).

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

물만 넣으면 됩니다.style="display:none";에게<div>

내가 말하는 바이올린 연주: http://jsfiddle.net/krY56/13/

jQuery:

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

CSS 클래스가 있는 것이 선호됨.hidden

.hidden {
     display:none;
}

이것을 시도해 보십시오.

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

저는 이 질문이 좀 구식이라는 것을 알고 있습니다. 그리고 그것이 유사한 이슈를 검색하는 구글에 나타나기 때문에 @CowWarrior의 답변 위에 제가 조금 더 확장할 것이라고 생각했습니다.저는 이와 비슷한 솔루션을 찾고 있었는데, 수많은 SO 질문/응답과 부트스트랩 설명서를 샅샅이 조사한 결과 솔루션은 꽤 간단했습니다.다시 말하지만, 이건 내장된 부트스트랩을 사용하는 겁니다.collapsedivs와 부트스트랩의 "Collapse Event"를 보여주는 클래스.

제가 깨달은 것은 부트스트랩 아코디언을 사용하여 쉽게 할 수 있다는 것입니다. 하지만 대부분의 경우 필요한 기능이 아코디언과 "다소" 유사함에도 불구하고 숨김을 보여주고 싶은 점에서 다릅니다.<div>예를 들어, a의 메뉴 버튼에 기반을 두고 있습니다.navbar. 아래는 이에 대한 간단한 해결책입니다.앵커 태그(<a>)는 navbar 항목일 수 있으며 붕괴 이벤트에 따라 해당 div가 기존 div를 대체합니다.코드스니펫은 약간 엉성해 보이지만 기능 달성에 근접했습니다.

자바스크립트가 하는 모든 것은 다른 것들을 만드는 것입니다.<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>

언급URL : https://stackoverflow.com/questions/23873005/hide-div-by-default-and-show-it-on-click-with-bootstrap