天道酬勤,学无止境

twitter bootstrap dropdown doesn't toggle closed when it should

Oh man, I've been tearing my hair out over this. 4 hours on a dropdown.

I'm using Twitter Bootstrap.

The fixed nav at the top has a dropdown, pretty standard stuff.

Except that the dropdown doesn't get closed as it normally should. It will only toggle open and closed when the toggle itself is pressed, not when an item in the menu is pressed or the user clicks outside the menu (both of these should close the dropdown).

The only thing I'm doing non-standard is my use of an iframe and a theme from bootswatch.

I haven't had an issue like this before so I have a feeling it may be a bug (upgraded bootstrap to 2.1.0, and jquery to 1.7.2 today).

all the code here:

    <!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>

live here: http://www.joshlevent.com/dropdownbug/

评论

iframes don't propagate click events up to their parents by default. You need to add code to do that manually. In addition to being able to edit the content of the iframe you are loading, cross-domain restrictions will require you to be loading the iframe content from the same domain as your page.

This would need to run from within the iframe page:

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

where #frame is the id of your iframe. You could delegate the click to anything in the parent (e.g., 'body') and that would work as well. Depends on how tightly you want to couple the content in the iframe to the page.

So, that should take care of the page closing the menu.

Important Update

As for clicking on the menu items to close the menu, apparently there was a bug[?] in the lastest update (2.0.4 > 2.1.0): Dropdown menus don't get closed when selecting an option. A selector was changed from '.dropdown form' to '.dropdown', so now what was once a celebrated feature to make working with dropdowns in forms easier has evolved into a callback that blocks all clicks on dropdown menu items.

An interim solution is to include the following code until the bug is fixed (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() })

Nothing worked for me, except this:

$('.dropdown-menu li a').on('click', function(e) {
    $('.dropdown-toggle').dropdown('toggle');
    e.stopPropagation();
});

I was seeing the same problem with 2.1.1.

The solution that was posted on GitHub which worked easily for me was:

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

Credit to blakeembrey at https://github.com/twitter/bootstrap/issues/5094

This is the full solution I implemented based on merv's great answer. If there is a better way for me to post the solution for those coming in the future please let me know.

This jquery was added to the bottom of the html of the pages in the frame:

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

The dropdown was switched to a button and restyled to fit into the navbar. In the 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>

In the CSS:

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

full code of solution (update of the full code in the question - this is the outside frame only):

<!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>

for complete reference, this is the code of a page inside the frame:

<!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>

Fixed testing site you can preview at (but don't copy the whole page code, as it has some server side (cloudflare) stuff in it). http://www.joshlevent.com/dropdownbug/

The bug is fixed now, You can use https://github.com/twitter/bootstrap/blob/2.1.1-wip/js/bootstrap-dropdown.js , the 2.1.1-wip for dropdown

you can remove the "open" class from dropdown menus when another is clicked. this worked for me so far:

$(document).ready(function () {
    $('a.dropdown-toggle').each(function(){
        $(this).on("click", function () {
            $('li.dropdown').each(function () {
                $(this).removeClass('open');
            });
        });
    });
});

My fix for more than one dropdowns in nav menu: Other solutions doesn't work for me

$('.dropdown-toggle').on('click', function (e) {
      $('.dropdown-toggle').each(function (i,elem) {
          if (elem != e.target) $(elem.parentElement).removeClass('open');
      });
})

You can also add propagate click event from the parent page with this code (fixed the same issue for me):

var myFrameContents = document.getElementById("frame").contentWindow.document;
myFrameContents.body.addEventListener("click", function() {
    document.body.click();
});

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • Twitter引导在下拉列表打开时停止传播(Twitter bootstrap stop propagation on dropdown open)
    问题 我在带有插件jOrgChart的div中有一个twitter引导下拉列表。 我遇到的问题是,当我单击按钮以打开下拉菜单时,它还会触发父div中的click事件,该事件会折叠其他元素。 这是我的html: <div id="chart"> <div class="node"> <div class="btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Actions <span class="caret"></span> </a> <ul class="dropdown-menu" style="text-align:left;"> <li><a href="#">Edit</a></li> <li><a href="#">Delete</a></li> </ul> </div> </div> <div class="node"> ... </div> 我想防止a.dropdown-toggle的点击冒泡到div.node,我尝试这样做: $("div#chart div.btn-group > a.dropdown-toggle").click(function (e) { e.stopPropagation(); }); 但是现在下拉菜单不起作用。 编辑 这是具体的情况
  • 如何隐藏Twitter Bootstrap下拉菜单(How to hide Twitter Bootstrap dropdown)
    问题 这很烦人-当我在Bootstrap下拉菜单中单击某个项目时,该下拉菜单不会关闭。 当您单击下拉项时,我将其设置为打开Facebox灯箱,但是它有问题。 我尝试过的 单击该项目后,我尝试执行以下操作: $('.dropdown.open').removeClass('open'); $('.dropdown-menu').hide(); 这将其隐藏起来,但是由于某种原因,它将无法再次打开。 如您所见,我确实需要关闭下拉菜单,因为它在保持打开状态时显得cr脚(主要是因为下拉菜单的z-index高于Facebox模态框叠加层。 为什么我不使用Bootstrap的内置模式框 如果您想知道为什么我不使用Bootstrap内置的漂亮模态框,那是因为: 它没有办法使用AJAX将内容加载到其中。 您每次必须为模式输入HTML; 使用Facebox,您可以执行以下操作: $.facebox({ajax:'/assets/ajax/dialogs/dialog?type=block-user&id=1234567'}); 它使用CSS3动画进行动画处理(看起来很不错),但是在非CSS3浏览器中它只是显示出来,看上去并不那么好。 Facebox使用JavaScript淡入,因此可在所有浏览器中使用。 回答1 试试这个: $('.dropdown.open .dropdown-toggle')
  • 带悬停的Bootstrap下拉菜单(Bootstrap Dropdown with Hover)
    问题 好的,所以我需要的很简单。 我已经设置了一个带有一些下拉菜单的导航栏(使用class="dropdown-toggle" data-toggle="dropdown" ),并且工作正常。 事情是它可以在“ onClick ”上运行,而我希望它可以在“ onHover ”上运行。 有内置的方法可以做到这一点吗? 回答1 最简单的解决方案是使用CSS。 添加类似... .dropdown:hover .dropdown-menu { display: block; margin-top: 0; // remove the gap so it doesn't close } 工作小提琴 回答2 最好的方法是只用悬停触发Bootstraps click事件。 这样,它仍应保持对触摸设备的友好 $('.dropdown').hover(function(){ $('.dropdown-toggle', this).trigger('click'); }); 回答3 您可以使用jQuery的悬停功能。 您只需要在鼠标进入时添加open的类,并在鼠标离开下拉菜单时删除该类。 这是我的代码: $(function(){ $('.dropdown').hover(function() { $(this).addClass('open'); }, function() { $(this)
  • Twitter Bootstrap:在下拉列表关闭时调用js函数(Twitter Bootstrap: Call a js function when a dropdown is closed)
    问题 关闭或切换自举程序下拉菜单时是否会触发一个我可以配合的事件? 回答1 从twitter bootstrap官方页面: $('#myDropdown').on('hide.bs.dropdown', function () { // do something… }); hide.bs.dropdown是此处描述的4个事件之一。 更新(16年4月13日) 这些事件在Bootstrap 4也相同。 Bootstrap v4文档。 回答2 这就是Bootstrap v2.3.2如何关闭菜单的方法,无论您单击什么都可以: $('html').on('click.dropdown.data-api', function () { $el.parent().removeClass('open') }); 如果您使用的是v2.x,则可以用来了解何时关闭菜单。 但是,请记住,这是在每次点击时触发的。 如果仅在菜单真正关闭时(可能一直在执行)仅需要执行某项操作,则需要跟踪首先打开菜单的时间。 在这方面,公认的答案可能是更好的解决方案。 但是,在Boostrap v3.0.0中,下拉菜单支持四个单独的事件: show.bs.dropdown :调用show实例方法时,将立即触发此事件。 shown.bs.dropdown当下拉列表对用户可见时将触发此事件(将等待CSS转换完成)​​。 hide
  • Twitter Bootstrap移动导航:单击菜单链接后隐藏菜单(Twitter Bootstrap mobile nav: hide menu after clicking menu link)
    问题 我正在寻找一种使Twitter Bootstrap移动/平板电脑导航在单击菜单链接后自动隐藏/折叠的方法。 我有很多菜单项,因此当用户在iPhone中展开菜单时,他们只能看到菜单,而看不到下面的页面。 当用户单击菜单链接时,这会使用户感到困惑,从而使单击后似乎什么也没有发生。 非常感谢您,并拥抱任何可以通过此向我指出正确方向的人! 回答1 如果您使用的是BS3.x,则可以使用这样的标记折叠移动导航-注意主页链接的标记中的“数据切换”和“数据目标”: <nav class="collapse navbar-collapse" role="navigation"> <ul class="nav navbar-nav"> <li class="active"> <a data-toggle="collapse" data-target=".navbar-collapse" href="#home">Home</a> </li> <li> 您也可以通过以下脚本折叠移动导航: <script> $('.navbar-collapse a').click(function (e) { $('.navbar-collapse').collapse('toggle'); }); </script> 这种方法绝对不需要额外的标记。 每次在导航中单击链接时,都会切换导航栏。 干杯。 回答2
  • Twitter Bootstrap无法停止单击关闭的下拉列表(Twitter Bootstrap cant stop a dropdown from closing on click)
    问题 我查看了其他类似的问题,并尝试了许多解决方案,但没有一个起作用。 这是问题,这是顶部横幅的迷你登录表单。 当您在字段中单击时,我需要按钮不自动关闭。 这是我的代码: <script> $(document).on('click', '.dropdown-menu', function(e){ $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. }); ​</script> <div class="btn-group" > <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> <i class="cus-key"></i> Login <span class="caret"></span> </a> <ul class="dropdown-menu pull-right keep_open"> <form action="clog.php" method="post" class="keep_open"> <!-- dropdown menu links --> <li><input type="text" placeholder=
  • 如何在悬停而不是单击时使Twitter Bootstrap菜单下拉菜单(How to make Twitter Bootstrap menu dropdown on hover rather than click)
    问题 我想让我的Bootstrap菜单在悬停时自动下拉,而不是必须单击菜单标题。 我也想丢掉菜单标题旁边的小箭头。 回答1 我基于最新的(v2.0.2)Bootstrap框架创建了一个纯悬停下拉菜单,该框架具有对多个子菜单的支持,并认为我会将其发布给以后的用户: body { padding-top: 60px; padding-bottom: 40px; } .sidebar-nav { padding: 9px 0; } .dropdown-menu .sub-menu { left: 100%; position: absolute; top: 0; visibility: hidden; margin-top: -1px; } .dropdown-menu li:hover .sub-menu { visibility: visible; } .dropdown:hover .dropdown-menu { display: block; } .nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu { margin-top: 0; } .navbar .sub-menu:before { border-bottom: 7px solid transparent; border
  • 带有AngularJS的Twitter Bootstrap Navbar-折叠不起作用(Twitter Bootstrap Navbar with AngularJS - Collapse Not Functioning)
    问题 我正在使用Angular和Twitter Bootstrap导航栏,并尝试使折叠功能正常工作。 部分:program.html <div class="navbar navbar-inverse navbar-static-top" ng-include="'partials/navbar.html'" ng-controller="NavbarCtrl"></div> 部分:navbar.html <div class="navbar-inner"> <div class="container"> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">Short Course</a> <div class="nav-collapse collapse"> <ul class="nav"> <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li> <li
  • 避免双击以切换Bootstrap下拉菜单(Avoid having to double-click to toggle Bootstrap dropdown)
    问题 我正在使用Bootstrap下拉菜单。 问题在于它从不会在第一次单击时下降。 我需要单击2次才能切换。 我猜想click事件在传播之前就被卡在了某处... 有什么办法可以解决这个问题? 回答1 如果有人使用ui-bootstrap模块的angular以及常规的bootstrap HTML下拉列表定义,则还需要单击两次。 <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a> [...] </li> =>删除data-toggle="dropdown"将解决此问题。 一键打开下拉菜单将在此之后起作用。 参考:https://github.com/angular-ui/bootstrap/issues/2294 回答2 在Bootstrap 4中, bootstrap.min.js和bootstrap.bundle.min.js现在在下拉菜单中发生冲突。 通过删除bootstrap.min.js ,下拉双击问题将得到解决。 回答3 如果您的项目中两次包含Bootstrap,则可能会发生这种情况。 如果bootstrap.min.js和bootstrap.bundle.min.js(bootstrap和popper js)都包含在项目中
  • 允许单击twitter bootstrap下拉切换链接吗?(Allow click on twitter bootstrap dropdown toggle link?)
    问题 我们已经设置了twitter bootstrap下拉列表以在悬停上工作(而不是单击[是的,我们知道触摸设备上没有悬停])。 但是,我们希望能够在单击主链接时使其工作。 默认情况下,twitter引导程序会阻止它,那么我们如何重新启用它呢? 回答1 只需在您的锚点上将禁用添加为一个类: <a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b></a> 因此,总的来说,像这样: <ul class="nav"> <li class="dropdown"> <a class="dropdown-toggle disabled" href="http://google.com"> Dropdown <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> </ul> </li> </ul> 回答2 对于那些抱怨“子菜单没有下拉”的人,我以这种方式解决了,对我来说看起来很干净: 1)除了你的 <a class="dropdown-toggle disabled" href="http
  • Twitter Bootstrap cant stop a dropdown from closing on click
    I have looked at the other questions similar and tried many of the solutions, but none have worked. Here is the issue, this is a mini login form for the top banner. I need the button to not automatically close when you click in the fields. Here is my code: <script> $(document).on('click', '.dropdown-menu', function(e){ $(this).hasClass('keep_open') && e.stopPropagation(); // This replace if conditional. }); ​</script> <div class="btn-group" > <a class="btn btn-small btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> <i class="cus-key"></i> Login <span class="caret"></span> </a> <ul
  • 避免在内部单击时关闭下拉菜单(Avoid dropdown menu close on click inside)
    问题 我有一个Twitter Bootstrap下拉菜单。 如所有Twitter Bootstrap用户所知,单击(即使在内部单击)时,下拉菜单也会关闭。 为避免这种情况,我可以轻松地在下拉菜单上附加一个click事件处理程序,只需添加著名的event.stopPropagation() 。 <ul class="nav navbar-nav"> <li class="dropdown mega-dropdown"> <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-list-alt"></i> Menu item 1 <span class="fa fa-chevron-down pull-right"></span> </a> <ul class="dropdown-menu mega-dropdown-menu"> <li> <div id="carousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-slide-to="0" data-target="#carousel"></li> <li class="active"
  • 为什么此引导程序下拉示例不起作用?(Why doesn't this bootstrap dropdown example work?)
    问题 我只是在尝试Bootstrap文档中的示例,但是它似乎不起作用。 我只是得到纯HTML。 这是我的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="bootstrap.css" type="text/css"> <script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $('.dropdown-toggle').dropdown(); </script> <title
  • Twitter Bootstrap drop down menu not working
    I know there are a lot of questions like this on Stack Overflow and I've looked at them but my dropdown menu still isn't working. Here's my code: <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <ul class="nav pull-left"> <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">My Account<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Login</a></li> <li>
  • twitter bootstrap更改带有单击下拉菜单的按钮的背景颜色(twitter bootstrap change background color of button with dropdown menu on click)
    问题 在Twitter Bootstrap 2中,我希望能够更改导航栏中按钮的背景颜色,但仅当单击下拉菜单时才可以。 我尝试更改CSS,但我知道可以更改的类background-color是 .dropdown-toggle { *margin-bottom: -3px; background-color: #fffffff; } 但这没有用,因为它是静态完成的。 我也试过了 .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; background-color: #fffffff; } 但这也不起作用(什么也没有发生)。 HTML看起来像这样: <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"><
  • Twitter Bootstrap:如何实现始终折叠的导航栏下拉菜单?(Twitter Bootstrap: How to achieve an always-collapsed navbar dropdown menu?)
    问题 我正在Twitter Bootstrap中使用Navbar组件 http://getbootstrap.com/components/#navbar 我的目的是使导航栏始终折叠(即使在桌面大小的设备上查看时也是如此)。 如何才能做到这一点? 到目前为止,我已经用我的代码创建了这个JSFIDDLE-您将看到它是非常标准的。 当结果窗口的大小小时,下拉菜单将折叠。 但是,如果您放大结果窗口,则下拉列表不会折叠。 我已经准确地粘贴了JSFiddle中的内容以供参考: <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span
  • Twitter Bootstrap Rails按钮下拉列表没有响应AJAX(Twitter Bootstrap Rails button dropdown no responding to AJAX)
    问题 我有一个正在使用Bootstrap的Rails 4应用程序。 我正在创建一个仪表板页面,该页面显示带有颜色编码的按钮,以表示其所代表的工具的状态。 页面中的HTML如下所示: <div class="btn-group"> <a class="btn custombutton dropdown-toggle btn-success" data-toggle="dropdown" href="#" id="btn0" > 706-Hydraulic Ram<br> 98061841 </a> <ul class="dropdown-menu"> <li><a data-method="post" data-remote="true" href="/update_in_service?id=32" id="in_service" rel="nofollow">In Service</a></li> <li><a data-method="post" data-remote="true" href="/update_out_service?id=32" id="out_service" rel="nofollow">Out of Service</a></li> <li><a href="/tools/32">view Details</a></li> </ul> </div>
  • twitter bootstrap change background color of button with dropdown menu on click
    In Twitter Bootstrap 2, I want to be able to change the background color of a button in the navbar but only when the dropdown menu is clicked. I tried changing the CSS and I understood that the class background-color you can change is .dropdown-toggle { *margin-bottom: -3px; background-color: #fffffff; } but that didn't work as it does it statically. I also tried .dropdown-toggle:active, .open .dropdown-toggle { outline: 0; background-color: #fffffff; } but that didn't work either (nothing happens). HTML looks like this: <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar
  • Dropdown with a form inside with twitter-bootstrap
    I have a Dropdown in my TopBar, built with the Twitter Bootstrap CSS framework. I have 3 problems with it that I can't find any solution to: The text and password input fields are far too big, how can I adjust them? Making the dropdown box bigger would be OK too. The labels for the fields are too dark, how can I lighten them up a bit? The Dropdown is closing when I click into one of the fields. I have to reopen it and then I can type until clicking in the next field. The values are preserved even when the dropdown is closed. How can I make it stay open? Here is a screenshot of problems 1 and 2
  • Twitter Bootstrap: Call a js function when a dropdown is closed
    Is there an event that I can tie into that is fired when a bootstrap dropdown is closed or toggled?