40

这些“手风琴子菜单”可以在 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' 。

有没有人有任何其他线索？最近有类似问题的直接经验吗？

在此先感谢您的帮助。

4

8 回答 8

80

所以我想我明白了：我的原始标记完全依赖于 data-target 元素，但这显然还不够。<a>Safari（在 iPhone 上）似乎也需要 href 属性（无论如何它确实应该存在。所以这行得通：

<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>
于 2013-11-08T21:52:25.207 回答
29

对我来说，collapse 可以在台式机和 iphone 上运行，但我的一些崩溃在 ipad 上不起作用。事实证明，@Loris 在@Ryan 的回答中为我提供了完美的解决方案，将指针样式添加到任何可折叠触发器（例如，用作按钮的 div）。我将其概括为以下 CSS：

[data-toggle~="collapse"] {
    cursor: pointer;
}
于 2017-03-17T12:47:43.190 回答
7

看着这个，我遇到了同样的问题，但是，当您添加 href="#collapse1" 时，它会将您跳转到页面顶部。我通过将元素包装在按钮中并删除了按钮的 css 来解决此问题。因此，您的代码将是：

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

希望这可以帮助。

于 2014-04-25T15:29:33.180 回答
6

您只需将此属性添加到触发下拉列表的 div 即可解决此问题。

cursor: pointer;
于 2017-04-19T18:08:16.787 回答
5

这对我有用： 

$('.divClassName').on('click touchstart', function () {
     $($(this).data('target')).collapse('toggle');
});
于 2016-10-13T12:35:52.007 回答
3

要使其适用于任何元素类型，例如 a 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>
于 2015-02-16T12:22:57.123 回答
2

供进一步参考：

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

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

它解决了这个问题。

在 MDN 文档中这样说：

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

参考：

于 2018-02-19T03:57:53.647 回答
0

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

[isAnimated]="false"
于 2020-02-26T06:33:44.177 回答