引导数据切换在移动设备上不起作用

Posted

技术标签:

【中文标题】引导数据切换在移动设备上不起作用【英文标题】:Bootstrap data-toggle not working on mobile 【发布时间】:2018-05-24 14:43:06 【问题描述】:

我正在尝试在桌面浏览器上运行时完成与代码示例类似的数据切换。

这段代码的问题是它不能在移动设备上运行。例如:三星(s6、s7)和苹果(Iphone 6s 和 7s)

<div class="row">
        <div class="faq">   
            <div class="container">
                <div class="col-md-12">
                    <h1>FREQUENTLY ASKED QUESTIONS</h1>
                </div>
                <table class="table">
                    <thead>
                        <th>General</th>
                    </thead>

                    <tbody>
                        <tr data-toggle="collapse" data-target="#faq6" class="clickable faq-header">
                            <td>What are your hours of operation?
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div id="faq6" class="collapse">
                                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                                </div>
                            </td>
                        </tr>

                        <tr data-toggle="collapse" data-target="#faq7" class="clickable faq-header">
                            <td>What is the minimum storage period?
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div id="faq7" class="collapse">
                                    You can store as short as three months. But the longer you store the more money you will save!
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
     </div>

我希望它与浏览器一样,当您点击一个问题时,它会触发并显示相应的答案。

我目前得到的实际结果是它不响应任何触摸/点击。我的菜单下拉菜单工作等等,但数据切换似乎没有响应。

我尝试了以下答案: The data-toggle attributes in Twitter Bootstrap / Bootstrap3 accordion table not working on ios mobile/ Bootstrap data-toggle not working in Safari/ 但它们似乎都不适合我

【问题讨论】:

用你的努力创建一个 jsfiddle Bootstrap data-toggle not working in Safari的可能重复 【参考方案1】:

尝试将href="#" 添加到&lt;a 标记中,这实际上并未在您的问题中显示。这为我解决了。

【讨论】:

以上是关于引导数据切换在移动设备上不起作用的主要内容,如果未能解决你的问题,请参考以下文章

用于显示和居中元素的引导响应媒体查询在 Ralis 上不起作用

数据切换在中继器内的按钮上不起作用

Bootstrap v2 下拉导航在移动浏览器上不起作用

使用引导程序时,下拉菜单在移动屏幕上不起作用

加入()函数加载页面在移动设备上不起作用

Laravel 导航栏切换在 bootstrap 4.4.1 和 jquery 3.3 上不起作用