5

哦，伙计，我一直在为此扯头发。4小时的下拉菜单。

我正在使用 Twitter 引导程序。

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

除了下拉菜单没有正常关闭。它只会在按下切换本身时切换打开和关闭，而不是在按下菜单中的项目或用户在菜单外单击时（这两者都应该关闭下拉菜单）。

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

我以前没有遇到过这样的问题，所以我觉得这可能是一个错误（今天将引导程序升级到 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/

4

8 回答 8

6

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

这需要从 iframe 页面中运行：

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

#frame你的 iframe 的 id在哪里。您可以将单击委托给父级中的任何内容（例如，'body'），这也可以。取决于您希望将 iframe 中的内容与页面耦合的紧密程度。

所以，这应该照顾关闭菜单的页面。

重要更新

至于单击菜单项关闭菜单，显然在最新更新（2.0.4 > 2.1.0）中有一个错误[？]：Dropdown menus don't get closed when selection 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() })
于 2012-08-25T19:01:30.710 回答
4

没有什么对我有用，除了这个：

$('.dropdown-menu li a').on('click', function(e) {
    $('.dropdown-toggle').dropdown('toggle');
    e.stopPropagation();
});
于 2013-06-11T12:38:28.443 回答
2

我在 2.1.1 中看到了同样的问题。

发布在 GitHub 上对我来说很容易工作的解决方案是：

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); });

归功于https://github.com/twitter/bootstrap/issues/5094上的 blakeembrey

于 2012-10-10T18:37:01.003 回答
1

这是我根据 merv 的出色回答实施的完整解决方案。如果有更好的方法让我为将来的人发布解决方案，请告诉我。

这个 jquery 被添加到框架中页面的 html 底部：

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

下拉菜单被切换到一个按钮并重新设计以适应导航栏。在 html 中：

                <li class="btn-group" id="samplebtn">
                    <a href="#" class="btn btn-primary dropdown-toggle" role="button" data-toggle="dropdown">
                        <i class="icon-pencil icon-white"></i>
                        Sample
                        <b class="caret"></b>
                    </a>

在 CSS 中：

        #samplebtn {
        position:absolute;
        top: 0;
        margin: 0px;
        padding: 0px;
        border: 0px;
        }
        #samplebtn .btn {
            border: 0px;
        }

解决方案的完整代码（更新问题中的完整代码 - 这只是外部框架）：

<!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%;
            }
            #samplebtn {
            position:absolute;
            top: 0;
            margin: 0px;
            padding: 0px;
            border: 0px;
            }
            #samplebtn .btn {
                border: 0px;
            }
        </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="btn-group" id="samplebtn">
                            <a href="#" class="btn btn-primary 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";
            });

            $('.dropdown-menu').on('click', function () {
              $('.dropdown-toggle').dropdown();
            });
        </script>
    </body>
</html>

为了完整参考，这是框架内页面的代码：

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <title>Title</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="./bootstrap.min.css" rel="stylesheet">
        <style>

        </style>
    </head>

    <body onload="scrollTo(0,0); $('#loading').css('display','none');">
        <div id="loading" style="width: 100%; height: 100%; background-color: white; background-image:url('loader.gif'); background-repeat:no-repeat; background-position: center center; position:fixed; display: none; z-index:100;"></div>
        <script type="text/javascript">
            document.getElementById("loading").style.display = 'block';
        </script>


        <div class="container">
        <div class="span12">
                    <h2>Project Description</h2>
                    <p>Lorem Ipsum Dolor Sit Amet</p>


                </div>

            <!-- /container -->
        </div>
        <!-- Le javascript==================================================-->

        <script src="./jquery.js"></script>
        <script src="./bootstrap.min.js"></script>
<!--        <script src="./bootstrap-dropdown.js"></script>
-->
<script>
$('html').on('click', function () {
  parent.$('#frame').trigger('click');
});

</script>

    </body>

</html>

修复了您可以预览的测试站点（但不要复制整个页面代码，因为其中包含一些服务器端（cloudflare）内容）。 http://www.joshlevent.com/dropdownbug/

于 2012-08-26T00:53:28.657 回答
1

该错误现已修复，您可以使用https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js，下拉列表的 2.1.1-wip

于 2012-08-30T11:00:37.743 回答
1

当单击另一个时，您可以从下拉菜单中删除“打开”类。到目前为止，这对我有用：

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});
于 2012-09-05T18:44:23.257 回答
1

我对导航菜单中多个下拉菜单的修复：其他解决方案对我不起作用

$('.dropdown-toggle').on('click', function (e) {
      $('.dropdown-toggle').each(function (i,elem) {
          if (elem != e.target) $(elem.parentElement).removeClass('open');
      });
})
于 2012-11-14T16:07:12.093 回答
-1

您还可以使用此代码从父页面添加传播点击事件（为我修复了相同的问题）：

var myFrameContents = document.getElementById("frame").contentWindow.document;
myFrameContents.body.addEventListener("click", function() {
    document.body.click();
});
于 2016-05-17T10:20:04.193 回答