jQuery bootstrap 3 手风琴折叠在 iphone 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19866172/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap 3 accordion collapse does not work on iphone
提问by Ryan
These "accordion submenus" work in chrome and firefox, but not on an iphone.
这些“手风琴子菜单”适用于 chrome 和 firefox，但不适用于 iPhone。
I have built a site which includes an "offcanvas" navigation menu on smaller screens. The user clicks "the hot dog button", and the navigation menu slides onto the screen from the left... that works great so far.
我建立了一个网站，其中在较小的屏幕上包含一个“offcanvas”导航菜单。用户点击“热狗按钮”，导航菜单从左侧滑到屏幕上......到目前为止效果很好。
Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.
一些导航元素包含子菜单。对于那些，我使用了 bootstrap 的手风琴标记。用户单击箭头，“子菜单”展开。
The Problem
问题
I develop using chrome on linux. This mechanism works perfectlyin chrome, firefox, and every browser I can get my hands on, as well as on my personal android phone. It also works on responsinator.com. However, since I don't have Safari, nor an iPhone, I have not been able to test this functionality directly on an iphone. I am working on getting an iPhone emulator...
我在 linux 上使用 chrome 进行开发。这种机制在 chrome、firefox 和我可以使用的每个浏览器以及我的个人 Android 手机上都可以完美运行。它也适用于responsinator.com。但是，由于我没有 Safari，也没有 iPhone，因此我无法直接在 iphone 上测试此功能。我正在努力获得一个 iPhone 模拟器...
Until then, some other people have looked at this on an iPhone, and I am told the "submenus" do not work at all. When the user clicks the arrow, nothing happens...
在那之前，其他一些人在 iPhone 上看过这个，我被告知“子菜单”根本不起作用。当用户单击箭头时，什么也没有发生......
Here is an excerpt of a "menu item" containing a "sub-menu": please note I am using the 'data-toggle' and 'data-target' attributes:
这是包含“子菜单”的“菜单项”的摘录：请注意我使用的是“数据切换”和“数据目标”属性：
<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 -->
I really don't know what to try next: Similar questions have ended with "a css conflict" or iphone problems regarding .click(), but I am not using that: I am using data-toggle/data-target. I am considering abandoning the 'data-target' markup in favor of manually invoking an on('click', ... )event, but I would rather not...
我真的不知道接下来要尝试什么：类似的问题以“css 冲突”或有关 iphone 的问题结束.click()，但我没有使用它：我正在使用data-toggle/data-target. 我正在考虑放弃“数据目标”标记以支持手动调用on('click', ... )事件，但我宁愿不...
By the way, I call this at the bottom of my page if that's relevant:
顺便说一句，如果相关，我会在我的页面底部调用它：
<script src="/assets/dist/js/bootstrap.min.js"></script>
Which is 'bootstrap.js v3.0.0' .
这是 'bootstrap.js v3.0.0' 。
Does anyone have any other clues? Any recent direct experience with an issue like this?
有人有其他线索吗？最近对此类问题有任何直接经验吗？
Thanks in advance for your help.
在此先感谢您的帮助。
回答by Ryan
So I think I figured this out: my original markup relied solely on the data-target element, but that is apparently not enough. Safari (on iPhone) seems to also need the href attribute (which really should be there on an <a>anyway. So this works:
所以我想我明白了这一点：我原来的标记完全依赖于数据目标元素，但这显然还不够。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>
But this does not:
但这不会：
<a data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</a>
回答by John Lehmann
For me, collapse would work on desktop and iphone, but some of my collapses were not working on ipads. It turned out that perfect solution for me was given by @Loris in @Ryan's answer, to add the pointer style to any collapsable trigger (e.g., a div acting as a button). I generalized this to the following CSS:
对我来说，折叠适用于台式机和 iPhone，但我的一些折叠不适用于 iPad。事实证明，@Loris 在@Ryan 的回答中为我提供了完美的解决方案，将指针样式添加到任何可折叠触发器（例如，充当按钮的 div）。我将其概括为以下 CSS：
[data-toggle~="collapse"] {
cursor: pointer;
}
回答by HanSoloShotFirst
looking at this, I had the same problem, however, when you add a href="#collapse1", it jumps you to the top of the page. I fixed this by wrapping the element in a button and removed the css for buttons. So, your code would be:
看着这个，我遇到了同样的问题，但是，当您添加 href="#collapse1" 时，它会将您跳转到页面顶部。我通过将元素包装在一个按钮中并删除了按钮的 css 来解决这个问题。所以，你的代码是：
<button data-toggle="collapse" data-target="#collapse1">
<i class="pull-right icon-chevron-right mobile-nav-icon"></i>
</button>
Hope this helps.
希望这可以帮助。
回答by Bodhidharma
You can fix this by simply adding this attribute to the div that triggers the dropdown.
您可以通过简单地将此属性添加到触发下拉列表的 div 来解决此问题。
cursor: pointer;
回答by gem007bd
This is working for me :
这对我有用：
$('.divClassName').on('click touchstart', function () {
$($(this).data('target')).collapse('toggle');
});
回答by Turnip
To make this work for any element type, such as a div, you can use the following jQuery method (tested ios 8):
要使其适用于任何元素类型，例如 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>
回答by Jorge Vargas
for further reference:
进一步参考：
I did this in my application:
我在我的应用程序中这样做了：
a[data-toggle="collapse"]{
cursor:pointer;
}
And it fixed the problem.
它解决了这个问题。
In the MDN documentation says this:
在 MDN 文档中是这样说的：
"Safari Mobile 7.0+ (and likely earlier versions too) suffers from a bug where click events aren't fired on elements that aren't typically interactive (e.g. ) and which also don't have event listeners directly attached to the elements themselves (i.e. event delegation is being used). See this live example for a demonstration. See also Safari's docs on making elements clickable and the definition of 'clickable element'"
“Safari Mobile 7.0+（可能还有更早的版本）存在一个错误，即点击事件不会在通常不具有交互性的元素上触发（例如），并且也没有直接附加到元素本身的事件侦听器（即正在使用事件委托。请参阅此现场示例以进行演示。另请参阅 Safari 的文档关于使元素可点击和“可点击元素”的定义”
References:
参考：
回答by Shakir Muhammed
Enabling the animation will cause some problems in IOS devices. Disable it and it will work. That was the case for me.
启用动画会导致 IOS 设备出现一些问题。禁用它，它会工作。我就是这样。
[isAnimated]="false"
