Accordian이없는 부트 스트랩 및 붕괴

저는 앵커 2 개와 div 2 개를 가지고 있으며 div 함수의 내용을 숨기고 표시하는 축소 기능을 사용하고 싶습니다. 그것은 잘 작동하지만 첫 번째 앵커를 클릭하면 펼쳐지지만 한 번 클릭하면 두 번째 컨텐트가 표시되지만 첫 번째 컨텐트는 숨기지 않는 한 가지 문제가 있습니다.Accordian이없는 부트 스트랩 및 붕괴

<div class="row mobile-options hidden-md hidden-lg"> 
<ul> 
    <li class="col-xs-4"><a href="#filtr" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a></li> 
    <li class="col-xs-4"><a href="#categories" class="mobile-options-item" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a></li> 
</ul> 
</div> 


<div id="filtr" class="collapse"> 
     Filtr content 
</div> 


<div id="categories" class="collapse"> 
     Categories content 
</div>

데모 : 사업부의의는 서로 옆에 없기 때문에 http://www.bootply.com/IdbPEK3ROM

나는 .accordion 또는 .panel을 사용할 수 없습니다.

어떻게 작동합니까?

감사합니다.

출처

2014-06-13 Odin

중복 가능성 [확대 한 DIV 다른 열리면 - 부트 스트랩 (http://stackoverflow.com/questions/23971819/close-one-div-when-the-other-opens- 부트 스트랩) – Nicolai

솔루션은 부트 스트랩 2.x에서만 작동합니까? Bootstrap 3.x로 시도 했으므로 작동하지 않습니다. 내 링크에 javascript 및'data-collapse-group'을 추가 할 때 아무 것도 바뀌지 않습니다. 나는 단추로 바꾸지 만 여전히 운이 없다. – Odin

부트 스트랩 3.x 용입니다. 제발 내 대답을 확인해주세요. – Nicolai

내가 a 태그 2 개 추가 속성을 추가 접힌 상태).

jsFiddle exmpale

HTML :

<div class="container"> 
    <div class="row mobile-options"> 
     <ul> 
      <li class="col-xs-2"><a href="#filtr" data-target="#filtr" class="mobile-options-item" data-collapse-group="myDivs" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-filter"></i></span> Filtr</a> 
      </li> 
      <li class="col-xs-2"><a href="#categories" data-target="#categories" class="mobile-options-item" data-collapse-group="myDivs" data-toggle="collapse"><span class="mr5"><i class="glyphicon glyphicon-list"></i></span> Categories</a> 
      </li> 
     </ul> 
    </div> 
    <div id="filtr" class="collapse"> 
     <p>Filtr content</p> 
    </div> 
    <div id="categories" class="collapse"> 
     <p>Categories content</p> 
    </div> 
</div>

자바 스크립트 :

$("[data-collapse-group='myDivs']").click(function() { 
    var $this = $(this); 
    $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function() { 
     $($(this).data("target")).removeClass("in").addClass('collapse'); 
    }); 
});

UPDATE :

$("[data-collapse-group='myDivs']").click(function (e) { 
    e.preventDefault(); 
     var $this = $(this); 
     $("[data-collapse-group='myDivs']:not([data-target='" + $this.data("target") + "'])").each(function() { 
      $($(this).data("target")).removeClass("in").addClass('collapse'); 
     }); 
    });

jsFiddle

출처

2014-06-14 11:42:52 Nicolai

좋아, 이제는 필요한 것처럼 작동합니다. 감사합니다. 한가지 더 중요한 것은 아니지만 더 나은 UX를 제공합니다. 이제 div #filtr를 확장하면보기가 div # filtr의 시작 부분으로 스크롤 업되어 #top처럼 작동합니다. 아코디언처럼 작동합니까? 그래서 div # filtr이 아래로 내려 가고 태그가 위치에 있고 #filtr가 아래에 표시됩니까? – Odin

@Odin, 내 대답의 업데이트 섹션을 확인하십시오. – Nicolai

이것은 완벽합니다. 고마워요! – Odin

나는 부트 스트랩 방법으로 그것을 할 방법을 몰라,하지만 난 그런 내가이에 따라 표시해야합니다 어떤 DIV 표시됩니다, 모든 collapse DIV 년대를 숨 깁니다이

먼저 같은 일을 할 것입니다 이벤트 클릭

$(function(){ 
    $('.mobile-options-item').click(function(){ 
    $('.collapse').hide(); 
    var target = $(this).attr('href'); 
    $(target).show(); 
    }); 
})

링크 : div의 여야를 지정 data-target 및 data-collapse-group (사용자 정의 속성 : http://www.bootply.com/pVfjihcVYE

출처

2014-06-13 13:06:21 Raghuveer

솔루션을 제공해 주셔서 감사합니다. 그러나 100 % 정확하지는 않습니다. 예, 그것은 하나의'.mobile-options-item'을 숨기고 두번째를 보여줍니다.하지만 링크를 클릭하여 이미 확장 된 항목을 닫을 수는 없습니다. 당신이 bootply 링크를 확인하십시오. – Odin

Accordian이없는 부트 스트랩 및 붕괴

답변

관련 문제