bootstrap 3手风琴崩溃不能在iphone上工作 [英] bootstrap 3 accordion collapse does not work on iphone

问题描述

这些手风琴子菜单可以在chrome和firefox中使用，但不能在iphone上使用。

我已经建立了一个包含offcanvas导航菜单的网站屏幕。用户点击热狗按钮，导航菜单从左边滑动到屏幕上...到目前为止工作得很好。

一些导航元素包含子菜单。对于那些，我使用bootstrap的手风琴标记。用户点击箭头，submenu展开。

$ b

chrome on linux。这个机制在chrome，firefox和每个浏览器都可以得到我的手，以及在我的个人Android手机上完美工作 。它也适用于 responsinator.com 。然而，由于我没有Safari，也没有iPhone，我没有能够直接在iphone上测试这个功能。我正在开发一个iPhone模拟器...

在那之前，一些其他人已经在iPhone上看过这个，我被告知子菜单工作。当用户单击箭头时，没有任何反应...

这是包含子菜单的菜单项的摘录：请注意，我使用data-toggle和data-target属性：

 < div class =panel panel-default> ; 
<！ - Trigger - > 
< div class =panel-heading> 
< h4 class =panel-title> 
< a href =view.php？cms_nav_id = 1name =about> 
关于< / a> 
< a data-toggle =collapsedata-target =＃collapse1> 
< i class =pull-right icon-chevron-right mobile-nav-icon>< / i> 
< / a> 
< / h4> 
< / div> 
 
<！ - 填充子菜单： - > 
< div id =collapse1class =panel-collapse collapse> 
< div class =panel-body> 
< a href =view.php？cms_nav_id = 7name =ohioimprovementprocess>俄亥俄州改进过程< / a> 
< / div> 
< div class =panel-body> 
< a href =view.php？cms_nav_id = 8name =org / orgbeliefs>组织信念< / a> 
< / div> 
< / div> 
 
< / div><！ -  /.panel  - > 
  

我真的不知道接下来要做什么：类似的问题已经以css冲突或者关于 .click（）的iphone问题，但我不使用：我使用 data-toggle / data-target 。我考虑放弃数据目标标记，有利于手动调用 on（'click'，...）事件，但我不想...

顺便说一句，如果这是相关的话，我在页面底部打电话：

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

这是bootstrap.js v3.0.0。

有没有其他线索？

预先感谢您的帮助。

解决方案

所以我想我想出了这一点：我的原始标记仅依赖于data-target元素，但这显然是不够的。 Safari（在iPhone上）似乎还需要href属性（它真的应该在< a> 上），因此这可以工作：

 < a data-toggle =collapsedata-target =＃collapse1href =＃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> ; 
  

These "accordion submenus" work in chrome and firefox, but not on an 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.

Some of the navigation elements contain submenus. For those, I used bootstrap's accordion markup. The user clicks an arrow, and the "submenu" expands.

The Problem

I develop using chrome on linux. This mechanism works perfectly in 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...

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

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

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

Does anyone have any other clues? Any recent direct experience with an issue like this?

Thanks in advance for your help.

解决方案

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:

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

这篇关于bootstrap 3手风琴崩溃不能在iphone上工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！