折叠在 Safari Mobile 浏览器中不起作用

Question

所以我通读了其他一些主题，但发现 none 适合我的问题。正如 header 所暗示的那样，我无法在单击 + 字形图标时折叠我的（在这种情况下）panel-body。它在其他浏览器上工作正常，但在移动 Safari 版本 9 上它没有反应。

我的代码：

<div class="panel panel-primary">
    <div class="panel-heading">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Registrerede brugere 
    <span data-toggle="collapse" href="#collapse1" class="glyphicon glyphicon-plus-sign pull-right" aria-hidden="true" id="notifications_collaps"></span>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
             HELLO                
        </div>
        <div class="panel-footer">
        <div class="btn-toolbar">
            <button type="button" class="btn btn-danger pull-right" id="slet_bruger" disabled>
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Deaktivér Bruger
            </button>
            <button type="button" class="btn btn-primary pull-right" id="rediger_bruger" disabled>
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Rediger Bruger
            </button>                 
        </div>
        <div class="clearfix"></div>
        </div>  
    </div>          
</div>

我创建了一个 fiddle 来演示我的问题：Fiddle

例如在 chrome 中打开它，它有效...

在 Safari Mobile 中打开它，它不会对点击做出反应..

Answer 1

这里的根本问题是你的字形跨度没有收到激活事件。有各种讨厌的技巧来尝试解决这个问题，比如用一个 div 和它自己的事件处理程序来包装它，或者向它添加 cursor:pointer 。它们的问题是它们很脆弱，可能会干扰其他东西。最好的解决方案是通过将 span 放在按钮元素中并根据需要设置样式来正确地将按钮称为按钮。然后它可以在移动设备和其他设备上正常运行，保持可访问性并且不需要神奇的特殊外壳。有关详细讨论，请参阅：

https://github.com/twbs/bootstrap/issues/16213

折叠在 Safari Mobile 浏览器中不起作用

Collapse does not work in Safari Mobile browser

html

mobile-safari

twitter-bootstrap-3