1

我读了这个答案，但导航栏选项似乎不适合我的问题。

我使用 Twitter bootstrap 2.3.1
我的网站中有一个常见问题解答部分。它有太多的问题和答案。

所以我需要这个：
在手机中：只显示标题，文本折叠。单击图标后可以看到文本。
在平板电脑/桌面：标题和全文将可见。

我有这样的代码片段：

<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" 
                       data-parent="#accordion2" href="#faq">
                Frequently Asked Questions
            </a>
        </div>
        <div id="faq" class="accordion-body collapse">
            <div class="accordion-inner">
                <h4>What is what ?</h4>
            <ul>
                   <li>Question 1: Do this do that
                   <li>Question 2: Do this do that
                   <li>Question 2: Do this do that
            </ul>

            </div>
        </div>
    </div>
</div>

此代码提供折叠的输出。当然可以通过$(".collapse").collapse()但我需要一个 CSS 解决方案来折叠。

另一种选择是复制此代码并将其中一个放在里面<div class="hidden-phone">而不折叠，另一个放在里面<div class="visible-phone">折叠。但这似乎不是一个好的解决方案。

如果您可以推荐另一个 Twitter 引导选项（如果存在），我也会很高兴。

（如果用户可以看到箭头等以了解标题可以折叠/未折叠，那就更好了）

4

0 回答 0