Question

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

Answer 1

以下是我如何使用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();
});

Answer 2

尼斯！但我发现了一种有效的简单方法：

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

倒数第二行只是从任何容器中移除“in”类，瞧！我似乎工作正常，但有没有理由不使用它？

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

2 个答案: