Bootstrap 3折叠面板在iPhone上无法正常工作

Question

Bootstrap 3折叠面板在iPhone上无法正常工作

javascriptjqueryioscsstwitter-bootstrap

40

这些“手风琴子菜单”在 Chrome 和 Firefox 上工作正常，但在 iPhone 上无法使用。

我建立了一个网站，包括在较小屏幕上的“离线画布”导航菜单。用户点击“三明治按钮”，导航菜单从左侧滑入屏幕... 到目前为止一切都很顺利。

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

输入图像描述

问题

我在 Linux 上使用 Chrome 进行开发。这种机制在 Chrome、Firefox 以及我能够找到的每个浏览器上都可以完美地工作，也可以在我的个人 Android 手机上工作。它在 responsinator.com 上也可以工作。但由于我没有 Safari 或 iPhone，我无法直接在 iPhone 上测试这个功能。我正在努力获取 iPhone 模拟器...

在那之前，其他人已经在 iPhone 上查看过这个功能，并告诉我 “子菜单” 根本不起作用。当用户点击箭头时，什么也不会发生...

以下是包含“子菜单”的“菜单项”的摘录，请注意我正在使用 'data-toggle' 和 'data-target' 属性:

<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。我考虑放弃"data-target"标记，转而手动调用on('click', ... )事件，但我宁愿不这样做...

顺便说一句，如果相关的话，我在页面底部调用了这个功能：

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

这是 'bootstrap.js v3.0.0'。

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

感谢您的帮助。

- Ryan

有没有一种方法可以不使用<a>标签来实现这个功能？我希望用户可以在“panel-heading”上的任何位置单击。 - Jared

8个回答

29

对于我来说，在桌面和iPhone上，折叠功能都可以使用，但是在iPad上有些折叠不起作用。最终，@Loris在@Ryan的答案中给出了完美的解决方案，即为任何可折叠触发器（例如充当按钮的div）添加指针样式。我将其概括为以下CSS：

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

- John Lehmann

1

你刚刚救了一个人的命。谢谢。 - sheng

1

哈哈，我很乐意。那个问题困扰了我的用户一段时间。我不得不借朋友的笔记本电脑。 - John Lehmann

这对于Bootstrap 4手风琴效果非常有效。我没有在card-header中使用按钮，只是在div上使用了data-toggle。 - tomyates

1

哥们儿！你的解决方案超级简单，节省了几个小时的编码/寻找解决方案。这应该被标记为最佳答案。谢谢。 - moreirapontocom

同意。Ryan的答案在最新的iPad上对我没用，但这个方案在iPad和iPhone上都可以很好地工作，并且实现起来非常简单。 - CharlesW

7

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

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

希望这有所帮助。

- HanSoloShotFirst

我尝试在iOS Chrome中使用带有data-toggle="collapse"的DIV，但它没有起作用。在我的电脑上的常规Chrome上工作。将DIV更改为<button>并删除所有默认按钮样式解决了问题。谢谢！ - Mark Rummel

这应该是被接受的答案，因为它不需要添加href，这会导致用户打开/关闭面板时屏幕跳动。 - jpw

6

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

cursor: pointer;

- Bodhidharma

5

这对我有用：

这个对我有效：

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

- gem007bd

touchstart 事件救了我的一天。 - lebill

3

为了让任何元素类型都能适用，比如 div，您可以使用以下jQuery方法（已在iOS8上测试）：

<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>

- Turnip

2

供参考：

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

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

它修复了这个问题。

在MDN文档中，它说：

"Safari Mobile 7.0+（以及可能更早版本）存在一个错误，即不会在通常不可交互的元素上（例如<div>）触发点击事件，并且这些元素本身也没有直接附加到元素上的事件侦听器（即使用事件委托）。请参见此实时示例进行演示。还请参阅Safari有关使元素可单击的文档和“可单击元素”的定义"

参考资料：

- Jorge Vargas

0

启用动画会导致IOS设备出现一些问题。禁用它，它就能正常工作。这对我来说就是这种情况。

[isAnimated]="false"

- Shakir Muhammed

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan · Accepted Answer

所以我认为我已经弄清楚了：我最初的标记仅依赖于data-target元素，但显然这还不够。 Safari（在iPhone上）似乎还需要href属性（无论如何应该在<a>中使用）。所以这样做可以：

所以我想我解决了这个问题：我的原始标记只依赖于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>