0

I used a Twitter Bootstrap navbar dropdown on my web page. The design is to open a new web page when a dropdown menu item is selected (clicked).

The problem I have is that the dropdown menu does not dismiss when a new web page is opened.

How can I close the dropdown menu programmatically?

The following is my web page design:

<script type="text/javascript">
$(document).ready(function () {
  $('.dropdown-toggle').dropdown();
  $('a.pagelink').click(function(e) {
     window.open(this.href);
     return false;
  });
});
</script>

<body>
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <ul class="nav">
                    <li class="dropdown" id="accountmenu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="./Bootstrap dropdown with navbar example_files/Bootstrap dropdown with navbar example.htm">Websites<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a class="pagelink" href="http://cnn.com">CNN</a></li>
                            <li class="divider"></li>
                            <li><a class="pagelink" href="http://www.yahoo.com">Yahoo</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container-fluid">
     <h1>Dropdown Example</h1>
    </div>
</body>
w2know
  • 67
  • 4
  • 13

1 Answers1

0

Why do you need Jquery for this? Bootstrap already have all those functions.

Just add target="_blank" in your <a> tag. The dropdown will automatically close when you click those button.

Eg:

<ul class="dropdown-menu">
<li><a class="pagelink" href="http://cnn.com" target="_blank">CNN</a></li>
<li class="divider"></li>
<li><a class="pagelink" href="http://www.yahoo.com" target="_blank">Yahoo</a></li>
</ul>
Surjith S M
  • 6,642
  • 2
  • 31
  • 50