Question

所以我已经阅读了其他一些帖子但发现没有一个适合我的问题。正如标题所示，单击+ glyphicon时，我无法折叠我的（在本例中）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

打开它，例如chrome，它可以工作......

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

Answer 1

这里的根本问题是你的glyphicon span不会收到激活事件。有各种令人讨厌的技巧试图解决这个问题，比如使用带有自己的事件处理程序的div包装它或添加cursor：指向它的指针。他们遇到的麻烦是他们很脆弱，可能会干扰其他事情。最好的解决方案是通过将您的跨度放在按钮元素中并将其设置为品味来正确调用按钮。然后它在移动设备上正常运行，否则，保留可访问性，不需要神奇的特殊外壳。有关扩展讨论，请参阅：

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

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

1 个答案: