부트 스트랩 3의 토글 옵션을 해제하십시오. 큰 해상도에서 아코디언을 접을

부트 스트랩 축소 아코디언의 토글 기능을 더 큰 해상도에서만 비활성화 할 수 있습니까?부트 스트랩 3의 토글 옵션을 해제하십시오. 큰 해상도에서 아코디언을 접을

목표는 상태를 전환하는 옵션으로 작은 해상도에서 아코디언을 축소시키고 상태를 전환 할 옵션이없는 큰 해상도로 확장하는 것입니다. 부트 스트랩을 사용하여이 기능을 구현하는 가장 좋은 방법은 무엇입니까?

나는 지금 가지고있는 것을 가지고 바이올린 데모를 만들었습니다. 나는 JS가 좋지 않다.

JSFiddle 데모 : http://jsfiddle.net/1crojp98/1/

HTML :

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title text-center"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Panel 1 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title text-center"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Panel 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

</div>

자바 스크립트 : 가능

$(document).ready(function(){ 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
}); 

$(window).resize(function(){ 
    if ($(window).width() >= 768){ 
    $('.panel-collapse').addClass('in'); 
    } 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
});

출처

2015-01-23 imag

내 대답으로 문제가 해결 되었습니까? –

나는 아코디언 아래의 콘텐츠로 바이올린을 업데이트했으며 링크를 클릭하면 큰 해상도로 점프하는 것을 볼 수 있습니다. 피할 수 있습니다. http://jsfiddle.net/1crojp98/3/ – imag

고맙습니다. 잘하고 있습니다. 친애하는! – imag

. 당신은 클릭 이벤트의 전파 중지해야 : 나는 jsFiddle http://jsfiddle.net/1crojp98/2/

에 코드를 업데이트 한

$('a[data-toggle="collapse"]').click(function(e){ 
    if ($(window).width() >= 768) { 
    e.stopPropagation(); 
    }  
});

을하지만이 코드는 더 큰 해상도 모두 붕괴와 개방 패널 (할 수있는 가능성을 해제하지만, 어쨌든 것).

출처

2015-01-23 11:24:09

큰 해상도에서 링크를 클릭하면 페이지가 아래로 스크롤되므로 피할 수 있습니까? – imag

예, 물론입니다. 이 이벤트의 기본 동작을 막아야합니다 (jsFiddle http://jsfiddle.net/1crojp98/4/을 업데이트했습니다). –

위대한, 그 속임수를했습니다. 알렉스 도와 줘서 고마워. – imag

더 큰 해상도로 링크를 숨기고 대신 예를 들어 베어 제목을 표시 할 수 있습니다. 패널 제목 내 :

<h4 class="panel-title text-center"> 
    <a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
    Panel 1 
    </a> 
    <div class="hidden-xs"> 
    Panel 1 
    </div> 
</h4>

출처

2016-02-27 18:06:11 Rolleric

좋은 해결 방법! –

부트 스트랩 3의 토글 옵션을 해제하십시오. 큰 해상도에서 아코디언을 접을

답변

관련 문제