Question

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

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

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

enter image description here

问题

我在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 =＆＃34;＃collapse1＆＃34;时，它会跳到页面顶部。我通过将元素包装在一个按钮中并删除按钮的css来修复此问题。所以，你的代码将是：

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

希望这会有所帮助。

Answer 4

这对我有用：

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

Answer 5

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

cursor: pointer;

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关于使元素可点击的文档以及“可点击元素”的定义“

参考文献：

Answer 8

启用动画会在IOS设备中引起一些问题。禁用它，它将起作用。对我来说就是这样。

[isAnimated]="false"

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

8 个答案: