Question

我使用jquery在页面加载时显示活动的子窗口，这很好。问题是当子窗口可见并且您点击页面上的任何位置时，“打开”＆＃39; class从下拉列表中删除，隐藏了subnav。我该如何防止这种情况？

这是jQuery：

var url = window.location;
$('ul.nav a').filter(function () {
    return this.href == url;
}).parent().addClass('active').parent().parent().addClass('open');

以下是HTML：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Link <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="/link_one">Link One</a></li>
            <li><a href="/link_two">Link Two</a></li>
          </ul>
        </li>          
        <li><a href="/contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

您可以尝试：

$(document).on('click', ':not(#navbar a)', function(e) {
  if ($(e.target).closest('#navbar').length == 0) {
    // if you did not click on the elements
    e.stopImmediatePropagation();
  }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav">
                <li class="dropdown open">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">Dropdown Link <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/link_one">Link One</a></li>
                        <li><a href="/link_two">Link Two</a></li>
                    </ul>
                </li>
                <li><a href="/contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
</button>
<div class="collapse" id="collapseExample">
    <div class="well">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh<br>
        helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
    </div>
</div>

在页面加载上显示活动子窗口（引导程序3） - 如何防止关闭页面单击

1 个答案: