2014-10-20 3 views
-2

현재/태그를 사용하여 작동하는 JQuery accordian 위젯이 있습니다. JQueryUI 웹 사이트 API 문서를 반영합니다. 이제 Bootstrap의 12col 격자 레이아웃을 페이지에 적용하고 중앙 10 열 안에 accordian을 배치했습니다. 992px의 중단 점 이상에서 펼치기 및 접기 작업에 모두 잘 작동합니다. div가 너비를 변경하는 동안 헤더를 클릭하고 현재 열려있는 섹션을 변경하는 기능을 잃어 버려야합니다.JQuery 아코디언이 부트 스트랩 브레이크 포인트에서 작동하지 않습니다

JQuery가 부트 스트랩 전에로드됩니다.

JQuery와 v1.9.1 부트 스트랩 v3.2.0

8 기본 @media이 분 너비 설정과 일치 있습니다 : 992px하지만, 자바 스크립트 붕괴 기능에서 작동하지 왜 내가 대답을 찾을 수 없습니다 그 픽셀 폭. 난 아직도 어디서든 답을 찾을 수 있지만

<div class="container"> 
    <div class="row"> 
     <div class="col-md-2 col-xs-1"></div> <!--- spanner div to adjust left cushion ---> 
     <div class="col-md-8 col-xs-10 sign_in_container"> 

    <div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
    <p> 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3>Section 4</h3> 
    <div> 
    <p> 
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
    mauris vel est. 
    </p> 
    <p> 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos himenaeos. 
    </p> 
    </div> 
</div> 

</div> <!--- END div class="col-md-8 col-xs-10 sign_in_container" ---> 

     <div class="col-md-2 col-xs-1"></div> <!--- spanner div to adjust right cushion ---> 
    <div> <!--- END row ---> 
</div> <!--- END container ---> 
+0

방법 것 그 자체가 행에 붕괴를 이동했다 어떤 코드도없이 문제를 복제 할 수 없다면 누구나 도울 수 있으리라고 생각하십니까? – charlietfl

+0

제 질문은 부트 스트랩을 사용하지 않고 992px에서 부트 스트랩을 통해 변경 될 내용입니다. JSFiddle을 다시 작성하려고 시도합니다 –

+0

, 어떤 마크 업을 사용했는지 어떻게 알 수 있습니까? – charlietfl

답변

-1

나는 많은 시행 착오를 완료하고 최종 해결 방법이나 해결책은 문제가 무엇인지

관련 문제