bootstrap3 아코디언이 작동하지 않습니다

Question

안녕하세요. bootstrap3으로 업그레이드한 이후 아코디언을 표시하기 위해 다음 코드를 사용하고 있었습니다. 아코디언이 더 이상 작동하지 않습니다. 패널 div를 추가하려고 했지만 아코디언이 작동하는 것 같더니 작동하지 않습니다. 각 섹션을 열 수 있지만 갈 때 처음으로 돌아가서 표시되지 않고 다른 것 중 어느 것도 표시되지 않습니까?

        <div class="row add-top add-bottom-main">
              <div class="panel accordion" id="accordion2">

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-one">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseOne" class="accordion-body collapse in">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>


                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-two">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseTwo" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-three">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseThree" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>

                <div class="accordion-group">
                    <div class="accordion-heading proxim-bg-four">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
                    <span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
                    </a>
                    </div>

                    <div id="collapseFour" class="accordion-body collapse">
                        <div class="accordion-inner">

                        <p>Lorem ipsum dolor sit amet, </p>
                        </div>
                    </div>
                </div>
    </div>
    </div>

내가 가진 또 다른 문제는 이 줄이 숨겨져 있다는 것입니다.

<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>

코드를 업데이트했는데 이제 항상 표시되나요?

<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">

내가 여기서 뭔가를 놓치고 있는 걸까?

감사해요

중

Answer 1

Bootstrap 3에서는 아코디언 마크업이 더 이상 지원되지 않습니다.

그러나 축소 기능을 사용하면 아코디언 효과를 얻을 수 있습니다.여기에 아코디언 예제가 있습니다.

http://getbootstrap.com/javascript/#collapse

다음은 코드의 예입니다.

http://www.bootply.com/94409#

마지막 문제에 따르면 bootStrap 3에는 새로운 도우미 클래스가 있는 것 같습니다.

http://getbootstrap.com/css/#helper-classes

hidden-xs 휴대폰에 적용되며 hidden-sm 태블릿에 적용됩니다.

그래서:

<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">