如何在选择菜单项并打开新网页时关闭引导程序下拉菜单

时间:2014-02-07 11:33:02

标签: jquery html twitter-bootstrap navbar

我在网页上使用了Twitter Bootstrap导航栏下拉列表。设计是在选择(单击)下拉菜单项时打开新网页。

我遇到的问题是,打开新网页时,下拉菜单不会被忽略。

如何以编程方式关闭下拉菜单?

以下是我的网页设计:

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

1 个答案:

答案 0 :(得分:0)

为什么你需要Jquery呢? Bootstrap已经具备了所有这些功能。

只需在target="_blank"标记中添加<a>即可。单击这些按钮时,下拉列表将自动关闭。

例如:

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