Geek asks and answers

Twitter bootstrap popup does not close when it should

Oh man, I took my hair off of this. 4 hours in the drop-down list.

I am using Twitter Bootstrap.

The fixed nav at the top has a drop down list, fairly standard stuff.

Except that the dropdown does not close as usual. It will turn on and off only when the switch is pressed, and not when the menu item is pressed or the user clicks outside the menu (both of them should close the drop-down list).

The only thing I do non-standardly is to use an iframe and themes from bootswatch.

I didn’t have such a problem before I had the feeling that it could be an error (updated bootstrap to 2.1.0 and jquery to 1.7.2 today).

all code is 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>

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

+5
8

iframe . , . , iframe, - iframe , .

iframe:

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

#frame - iframe. - (, 'body'), . , iframe .

, .

, , -, (2.0.4 > 2.1.0) [?]: . '.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() })
+6

, :

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

2.1.1.

, GitHub, , :

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

https://github.com/twitter/bootstrap/issues/5094

+2

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

, ( , () ). http://www.joshlevent.com/dropdownbug/

+1

"" . :

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

:

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

( ):

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

More articles:


All Articles