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 冲突”或关于.click() 的 iphone 问题结束，但我没有使用它：我正在使用 data-toggle/data-target。我正在考虑放弃“数据目标”标记以支持手动调用on('click', ... ) 事件，但我宁愿不...

顺便说一句，如果相关的话，我会在页面底部调用它：

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

这是'bootstrap.js v3.0.0'。

还有其他线索吗？最近对此类问题有任何直接经验吗？

提前感谢您的帮助。

Answer 1

所以我想我明白了：我的原始标记完全依赖于 data-target 元素，但这显然还不够。 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

对我来说，collapse 可以在台式机和 iphone 上运行，但我的一些崩溃在 ipad 上不起作用。事实证明，@Loris 在@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');
});

Answer 6

要使其适用于任何元素类型，例如 div，您可以使用以下 jQuery 方法（已测试 ios 8）：

<div class="collapse-header" data-target="#collapse_0">
    Click this element...
</div>
<div id="collapse_0">
    ...to collapse this element.
</div>

<script>
    $('.collapse-header').on('click', function () {
        $($(this).data('target')).collapse('toggle');
    });
</script>

Answer 7

供进一步参考：

我在我的应用程序中这样做了：

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

它解决了这个问题。

在 MDN 文档中这样说：

“Safari Mobile 7.0+（可能还有更早的版本）存在一个错误，即点击事件不会在通常不具有交互性的元素（例如）上触发，并且也没有事件侦听器直接附加到元素本身（即正在使用事件委托）。有关演示，请参阅此现场示例。另请参阅 Safari 的有关使元素可点击的文档和“可点击元素”的定义”

参考文献：

• https://github.com/twbs/bootstrap/issues/16213

• https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile

Answer 8

启用动画会导致 IOS 设备出现一些问题。禁用它，它将起作用。我就是这样。

[isAnimated]="false"