bootstrap 3手风琴折叠在iphone上不起作用

Question

这些"手风琴子菜单"适用于chrome和firefox,但不适用于iphone.

我建立了一个网站,在较小的屏幕上包含一个"offcanvas"导航菜单.用户点击"热狗按钮",导航菜单从左侧滑到屏幕上......到目前为止效果很好.

一些导航元素包含子菜单.对于那些,我使用了bootstrap的手风琴标记.用户单击箭头,"子菜单"将展开.

问题

我在linux上使用chrome开发.这种机制完全在Chrome,Firefox和每一个浏览器,我可以得到我的手,以及我个人的Android手机.它也适用于responsinator.com.但是,由于我没有Safari,也没有iPhone,因此我无法直接在iphone上测试此功能.我正在努力获得iPhone模拟器......

在那之前,其他一些人在iPhone上看过这个,我被告知"子菜单"根本不起作用.当用户点击箭头时,没有任何反应......

以下是包含"子菜单"的"菜单项"的摘录:请注意我使用的是"数据切换"和"数据目标"属性:

<div class="panel panel-default">
    <!-- The "Trigger" -->
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="view.php?cms_nav_id=1" name="about">
                About</a>
            <a data-toggle="collapse" data-target="#collapse1">
                <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
            </a>
        </h4>
    </div>

    <!-- Populated submenus: -->
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
            <a href="view.php?cms_nav_id=7" name="ohioimprovementprocess">Ohio Improvement Process</a>
        </div>
        <div class="panel-body">
            <a href="view.php?cms_nav_id=8" name="org/orgbeliefs">Organization Beliefs</a>  
        </div>
    </div>

</div><!-- /.panel -->

我真的不知道接下来会尝试什么:类似的问题已经以"css冲突"或iphone问题结束.click(),但我没有使用它:我正在使用data-toggle/data-target.我正在考虑放弃'数据目标'标记,转而支持手动调用on('click', ... )事件,但我宁愿不...

顺便说一句,如果相关,我会在页面底部调用它:

<script src="/assets/dist/js/bootstrap.min.js"></script>

这是'bootstrap.js v3.0.0'.

有没有人有任何其他线索？最近有这样一个问题的直接经验吗？

在此先感谢您的帮助.

Answer 1

所以我认为我认为这一点:我的原始标记完全依赖于数据目标元素,但这显然是不够的.Safari(在iPhone上)似乎也需要href属性(<a>无论如何都应该在那里.所以这有效:

<a data-toggle="collapse" data-target="#collapse1" href="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

但这不是:

<a data-toggle="collapse" data-target="#collapse1">
    <i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>

Answer 2

对我来说,崩溃可以在桌面和iPhone上工作,但我的一些折叠不适用于ipads.事实证明@Roris在@ Ryan的回答中为我提供了完美的解决方案,将指针样式添加到任何可折叠的触发器(例如,div作为按钮).我将此推广到以下CSS:

[data-toggle~="collapse"] {
    cursor: pointer;
}

Answer 3

看着这个,我有同样的问题,但是,当你添加一个href ="#collapse1"时,它会跳到页面的顶部.我通过将元素包装在一个按钮中并删除按钮的css来修复此问题.所以,你的代码将是:

<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>

希望这可以帮助.

Answer 4

您可以通过简单地将此属性添加到触发下拉列表的div来解决此问题。

cursor: pointer;

Answer 5

这为我工作：

$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});