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

bootstrap3手风琴无法正常工作

1 个答案: