控制容器可见性的自举导航栏项目

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

来源

2016-03-07 user123937

刚刚更改了上面的代码，因为只有container1应该有“合拢”;另外两个容器只需要“崩溃”。 – user123937

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

来源

2016-03-08 02:14:57 annieXo

这里是menuclose.js： '$（document）.on（'click'，'。navbar-collapse.in'，function（e）{if（$ e.target）.is（'a'）） && $（e.target）.attr（'class'）！='dropdown-toggle'）{ $（this）.collapse（'hide'）; } }）;' – user123937

menuclose.js的用途点击一个项目后关闭菜单。 – user123937

我刚试过你的jsfiddle例子，它似乎不工作。 – user123937

不错！我刚刚找到一个可行的简单方法：

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

的倒数第二行简单地从任何容器，瞧删除“中”之类的！我似乎工作正常，但有没有任何理由不使用这个？

来源

2016-03-08 19:56:14 user123937

控制容器可见性的自举导航栏项目

回答

相关问题