个人中心
gpt4 book ai didi

jquery - twitter bootstrap 下拉菜单在应该关闭时没有切换

转载 作者：行者123 更新时间：2023-12-03 22:56:33 24 4
gpt4 key购买 nike

天哪，我一直在为此抓狂。下拉菜单需要 4 小时。

我正在使用 Twitter Bootstrap。

顶部的固定导航有一个下拉菜单，非常标准的东西。

只不过下拉菜单没有像平常那样关闭。它只会在按下切换按钮本身时切换打开和关闭，而不是在按下菜单中的项目或用户在菜单外部单击时(这两者都应关闭下拉菜单)。

我唯一做的不标准的事情是使用 iframe 和 bootswatch 的主题。

我以前没有遇到过这样的问题，所以我感觉这可能是一个错误(今天将 bootstrap 升级到 2.1.0，jquery 升级到 1.7.2)。

所有代码在这里:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>test</title>
        <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
        <!--[if lt IE 9]> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
        <!-- Le styles -->
        <link href="./css/bootstrap.css" rel="stylesheet">
        <style>
            iframe {
                border: 0px;
                height: 95%;
                left: 0px;
                position: absolute;
                top: 50px;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" target="mainframe" href="./home.html">
                       Brand
                    </a>
                    <ul class="nav">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" role="button" data-toggle="dropdown">
                                <i class="icon-pencil icon-white"></i>
                                Sample
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu" role="menu">
                                <li>
                                    <a target="mainframe" href="./home.html#">One</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Two</a>
                                </li>
                                <li>
                                    <a target="mainframe" href="./home.html#">Three</a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Four
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                                <li>
                                    <a target="_blank" href="#">Five
                                        <i class="icon-share-alt"></i>
                                    </a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <a href="#">
                                <i class="icon-certificate icon-white"></i>Stuff</a></li>
                        <li>
                            <a href="#">
                                <i class="icon-globe icon-white"></i>Things</a></li>
                        <li>
                            <a target="mainframe" href="./home.html">
                                <i class="icon-film icon-white"></i>Nothing</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="container">
            <iframe id="frame" name="mainframe" src="./home.html"></iframe>
            <!-- /container -->
        </div>
        <!-- Le javascript==================================================-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

        <script src="./js/bootstrap.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.dropdown-toggle').dropdown();
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });

            $(window).resize(function () {
                var frameheight = window.innerHeight - 50;
                document.getElementById("frame").style.height = frameheight + "px";
            });
        </script>
    </body>
</html>

住在这里: http://www.joshlevent.com/dropdownbug/

最佳答案

默认情况下，iframe 不会将点击事件传播到其父级。您需要添加代码来手动执行此操作。除了能够编辑正在加载的 iframe 内容之外，跨域限制还要求您从与页面相同的域加载 iframe 内容。

这需要从 iframe 页面内运行:

$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

其中#frame是您的iframe的ID。您可以将点击委托(delegate)给父级中的任何内容(例如，'body')，这也可以工作。取决于您希望将 iframe 中的内容与页面耦合的紧密程度。

所以，这应该处理关闭菜单的页面。

重要更新

关于点击菜单项关闭菜单，显然在最新的更新(2.0.4 > 2.1.0)中存在一个bug[？]:Dropdown menus don't get closed when selecting an option 。选择器从 '.dropdown form' 更改为 '.dropdown'，因此，曾经一度著名的使表单中的下拉菜单更容易使用的功能现在已经演变成一个阻止所有点击下拉菜单项的回调。

临时解决方案是包含以下代码，直到错误得到修复 (2.1.1):

$('body')
  .off('click.dropdown touchstart.dropdown.data-api', '.dropdown')
  .on('click.dropdown touchstart.dropdown.data-api'
    , '.dropdown form'
    , function (e) { e.stopPropagation() })

关于jquery - twitter bootstrap 下拉菜单在应该关闭时没有切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12123989/

24 4 0
文章推荐： jquery mobile按下按钮时调用电话
文章推荐： jquery - asp.net 4.5 Web 表单不引人注目的验证 jQuery 问题
文章推荐： jquery - 使用 jQuery 映射函数后如何将数组转换为字符串？
文章推荐： toggle - 延迟和动画切换 jquery
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com