关于bootstrap的dropdown效果在ios safari中无效的问题

最新推荐文章于 2022-07-25 16:22:57 发布

dianjian0624

最新推荐文章于 2022-07-25 16:22:57 发布

阅读量249

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发

原文链接：http://www.cnblogs.com/roay/p/6803364.html

本文解决了在iOS设备上使用Bootstrap Dropdown组件时遇到的问题。在iOS的Safari浏览器中，Dropdown菜单无法正常弹出，原因是<a>标签缺少href属性。通过为触发Dropdown的<a>标签添加href=#属性，可以确保Dropdown在所有设备上正常工作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

又来了一个困扰了我半小时的问题，这段bootstrap的html代码在PC、在android的chrome上都跑的好好的，然而在IOS中就是不行。点了和没点一样，不会弹出dropdown。

<div class="dropdown">
    <a data-toggle="dropdown"><span class="glyphicon glyphicon-option-horizontal"></span></a>
    <ul class="dropdown-menu dropdown-menu-right" data-thumb-target="temp">
        <li><a href="#" class="thumb-up">赞</a></li>
        <li><a href="#" class="wonder">？</a></li>
        <li><a href="#" class="thumb-down">踩</a></li>
    </ul>
</div>

这么简单的一段代码，照着bootstrap的文档写的，在ios里就是弹不出来。没有报错没有提示，try catch也catch不到。

后来搜着搜着搜到了stackoverflow上才找到了答案。

<a>在IOS上不能没有href属性！不能没有href！不能没有href！

如果你的<a>恰好没给出href属性，那么好，safari就开始假装没看到，假装<a>不存在。html的问题嘛，js里也不会报错。safari就是毛病多，mdzz。

改成这样就好了：

<div class="dropdown">
    <a data-toggle="dropdown" href="#"><span class="glyphicon glyphicon-option-horizontal"></span></a>
    <ul class="dropdown-menu dropdown-menu-right" data-thumb-target="temp">
        <li><a href="#" class="thumb-up">赞</a></li>
        <li><a href="#" class="wonder">？</a></li>
        <li><a href="#" class="thumb-down">踩</a></li>
    </ul>
</div>