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

这些“手风琴子菜单”适用于chrome和firefox，但不适用于iphone

我已经建立了一个网站，其中包括一个较小屏幕上的“offcanvas”导航菜单。用户点击“热狗按钮”，导航菜单从左边滑到屏幕上。。。到目前为止效果很好

某些导航元素包含子菜单。对于这些，我使用了bootstrap的手风琴标记。用户单击箭头，“子菜单”展开

问题

我在linux上使用chrome进行开发。这种机制在chrome、firefox和我能接触到的所有浏览器以及我的个人android手机上都能完美地工作。它也适用于。然而，由于我没有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 -->

这就是“bootstrap.jsv3.0.0”

有人有其他线索吗？最近有没有直接经历过这样的问题

---

提前感谢您的帮助。

所以我想我已经解决了这个问题：我的原始标记仅依赖于数据目标元素，但这显然是不够的。Safari（在iPhone上）似乎还需要href属性（在

但这并不是：

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

---

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

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

---

希望这对您有所帮助。

要使此方法适用于任何元素类型，例如

div

，您可以使用以下jQuery方法（测试ios 8）：

单击此元素。。。
…以折叠此元素。
$（'.collapse header'）。在（'click'，函数（）{
$（$（this.data（'target'））.collapse（'toggle'）；
});

这对我来说很有用：

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

---

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

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

---

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

cursor: pointer;

供进一步参考：

我在申请表中这样做：

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

它解决了这个问题

MDN文档中指出：

“Safari Mobile 7.0+（可能还有更早的版本）存在一个缺陷，即点击事件不会在通常不具有交互性（例如）的元素上触发，并且也没有直接连接到元素本身的事件侦听器（例如，正在使用事件委派）。有关演示，请参见此实时示例。另请参见Safari关于使元素可单击的文档以及“可单击元素”的定义

参考资料：

---

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

[isAnimated]="false"

---

实际上与选项卡相关，而不是与菜单相关，但这正是我在IOS设备上遇到的问题。很好地解决了这个问题，谢谢！您可能应该接受这一正确答案。感谢您解决了这个问题并发布出来！或者，我发现设置

style=“cursor:pointer；”

添加到元素也有效。如果您没有使用锚定标记，则非常有用！为了避免在单击它时跳跃，请将

onclick=“return false；”“

添加到

元素。我不敢相信style=“cursor:pointer；”解决方案是唯一适合我的。WTF！：D.Thx@LorisI试图使用

DIV

和

data toggle=“collapse”

，但它在iOS Chrome中不起作用。在我的计算机上，它在常规Chrome中起作用。将

DIV

更改为

，并删除所有默认按钮样式，成功了。谢谢！这应该是可以接受的答案，因为它不需要添加href，当用户打开/关闭面板时会导致屏幕跳转。有没有办法不用标签就能做到这一点？我希望用户点击

面板标题上的任何地方。

。touchstart拯救了我的一天谢谢你刚刚救了一个男人的命。谢谢。哈哈，我很高兴。这给我的用户带来了一段时间的麻烦。我不得不借用一个朋友的笔记本。这对bootstrap 4手风琴来说是一种享受。我没有在里面使用按钮你的解决方案非常简单，节省了几个小时的编码/查找时间。这应该被标记为最佳答案。谢谢。同意。Ryan的答案在最新的iPad上对我不起作用，但在iPad和iPhone上效果很好，实现起来很简单。

cursor: pointer;

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

[isAnimated]="false"