bootstrap 3 手风琴折叠在 iPhone 上无法正常工作

8 浏览
0 Comments

bootstrap 3 手风琴折叠在 iPhone 上无法正常工作

这些“手风琴子菜单”在Chrome和Firefox上可以使用，但在iPhone上不行。

我建立了一个包含“离线画布”导航菜单的网站，适用于较小的屏幕。用户点击“热狗按钮”，导航菜单从左侧滑入屏幕...到目前为止，这个功能运行得很好。

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

问题

我在Linux上使用Chrome开发。这个机制在Chrome，Firefox和我能找到的所有浏览器上都完美运行，也在我的个人安卓手机上运行。它还在responsinator.com上运行。但是，由于我没有Safari，也没有iPhone，我无法直接在iPhone上测试此功能。我正在努力获取一个iPhone模拟器...

在那之前，其他一些人在iPhone上查看了这个问题，并告诉我“子菜单”根本不起作用。当用户点击箭头时，什么都不会发生...

以下是一个包含“子菜单”的“菜单项”的摘录：请注意，我使用了“data-toggle”和“data-target”属性：

    
        

            
                关于
            
                
            
        

    
            俄亥俄改进过程
            组织信念

我真的不知道接下来该尝试什么：类似的问题以“CSS冲突”或涉及.click()的iPhone问题结束，但我没有使用那个：我正在使用data-toggle/data-target。我考虑放弃' data-target '标记，改为手动调用on('click', ... )事件，但我宁愿不这样做...

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

这是“bootstrap.js v3.0.0”。

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

提前感谢您的帮助。

0

3 答案

0 Comments

bootstrap 3的折叠组件在iPhone上不能正常工作的原因是，原始的标记只依赖于data-target属性，但是Safari（iPhone上的浏览器）似乎还需要href属性。因此，在标签中加上href属性可以解决这个问题。

解决方法之一是在标签中添加href属性，如下所示：

另一种解决方法是给元素添加style="cursor: pointer;"属性，如下所示：

为了避免点击时跳转，可以在标签中添加onclick="return false;"属性，如下所示：

以上是一些解决这个问题的方法。希望对你有帮助！

0
0 Comments

问题出现的原因是bootstrap 3中的折叠效果在iPhone上无法正常工作。解决方法是通过给可折叠的触发器（例如，作为按钮的div）添加指针样式来解决。具体的CSS代码如下：

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

这个方法适用于bootstrap 4的手风琴组件，并且在最新的iPad和iPhone上都能正常工作，而且实现起来非常简单。

0
0 Comments

问题原因：在iPhone上，使用Bootstrap 3的折叠组件（accordion collapse）无法正常工作。当添加href="#collapse1"时，会跳转到页面顶部。

解决方法：将元素包裹在一个按钮中，并移除按钮的CSS样式。代码如下：

希望这对你有帮助。其他用户也尝试使用`DIV`元素的`data-toggle="collapse"`，但在iOS Chrome中无法正常工作。将`DIV`改为`

0