控制容器可見性的自舉導航欄項目

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

控制容器可見性的自舉導航欄項目

回答

相關問題