引导控制容器可见性的导航栏项

Bootstrap navbar items controlling container visibility

本文关键字：导航 可见性 控制      更新时间：2023-09-26
使用Bootstrap（

我在Bootstrap Studio中编辑）我有一个"固定到顶部"的导航栏和许多使用"折叠"切换其可见性的容器。我希望能够单击导航栏项，如果当前打开的容器不是与该项目关联的容器，它应该关闭并且单击的项目的关联容器应该打开（并且单击的菜单项应设置为"活动"）。

这是我所在位置的草图;单击导航栏项将打开和关闭自己的容器，但不会关闭任何其他打开的容器。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Vizimetrix Vapor Registry</a>
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active" role="presentation"><a href="#container1" data-toggle="collapse">Container 1</a></li>
                    <li role="presentation"><a href="#container2" data-toggle="collapse">Container 2</a></li>
                    <li role="presentation"><a href="#container3" data-toggle="collapse">Container 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container collapse in" id="container1">
        <div class="row">
            ...
        </div>
    </div>
    <div class="container collapse" id="container2">
        <div class="row">
            ...
        </div>
    </div>
    <div class="container collapse" id="container3">
        <div class="row">
            ...
        </div>
    </div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/menuclose.js"></script>
</body>
</html>

以下是我如何使用jQuery和原始HTML来做到这一点：

  <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header"><a class="navbar-brand navbar-link" href="#">Vizimetrix Vapor Registry</a>
                <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
            </div>
            <div class="collapse navbar-collapse" id="navcol-1">
                <ul class="nav navbar-nav navbar-right">
                    <li role="presentation"><a href="#container1" data-toggle="collapse">Container 1</a></li>
                    <li role="presentation"><a href="#container2" data-toggle="collapse">Container 2</a></li>
                    <li role="presentation"><a href="#container3" data-toggle="collapse">Container 3</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container collapse in" id="container1">
        <div class="row">
            container 1
        </div>
    </div>
    <div class="container collapse" id="container2">
        <div class="row">
            container 2
        </div>
    </div>
    <div class="container collapse" id="container3">
        <div class="row">
            container 3
        </div>
    </div>

.js：

$(document).ready(function() {
    $(".container").hide();
});
$("ul.nav li").click(function() {
  $("li").removeClass("active");
  $(this).addClass("active");
});
$("ul.nav li a").click(function() {
  var menu = $(this).attr("href");
  $(".container").hide();
  $(menu).show();
});

更新的 JSfiddle： https://jsfiddle.net/2p1dcosv/4/

。

此外，我建议将所有js功能放在锚标签或LI标签上，而不是同时使用两者。现在，您让 LI 标记切换"活动"状态，而锚标记的 href 是触发容器的原因。您可以将所有 CSS 样式应用于锚标记而不是 LI，然后您只需要一键功能：

$("ul.nav li a").click(function() {
  $("ul.nav li a").removeClass("active");
  $(this).addClass("active");
  var menu = $(this).attr("href");
  $(".container").hide();
  $(menu).show();
});

很好！但我刚刚找到了一种简单的方法：

$("ul.nav li").click(function() { 
  $("li").removeClass("active"); 
  $(this).addClass("active"); 
  $("div.container").removeClass("in") 
});

倒数第二行只是从任何容器中删除类"in"，瞧！我似乎工作正常，但有什么理由不使用它吗？

相关文章：