有2個獨立的<nav>標籤獨立工作

Question

我試圖讓兩個獨立的導航菜單獨立運作，取決於用戶點擊哪個按鈕，並顯示在同一個地方（左）。我有2個獨立的功能，但只能得到兩個按鈕來打開相同的導航菜單（鏈接1,2,3不是鏈接4,5,6）。我可以打開第二個菜單，但前提是將ClassName更改爲topnav而不是sidenav。我也嘗試getElementByid，但它也不起作用。感謝您的任何幫助。

<div class="w3-half w3-container"> 
    <div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large"> 
     <p><a title="Personal Information" onclick="w3_openpers()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a> 
      Personal 
     </p> 
    </div> 
</div> 
<div class="w3-half w3-container"> 
    <div id="FloatingBox" class="w3-card-16 w3-round w3-blue-grey w3-animate-opacity w3-animate-bottom" style="font-size:xx-large; "> 
     <p><a title="Professional Information" onclick="w3_openprof()" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a> 
      Professional 
     </p> 
    </div> 
</div> 
<!--- Side Navigation Personal---> 
<nav id="persnav" class="w3-sidenav w3-white w3-card-2 w3-animate-left" style="display:none;z-index:5"> 
    <a href="javascript:void(0)">Link 1</a>  
    <a href="javascript:void(0)">Link 2</a>  
    <a href="javascript:void(0)">Link 3</a> 
    <br> 
    <a href="javascript:void(0)" onclick="w3_closepers()" class="w3-closenav w3-text-theme w3-text-red" >Close &times;</a>  
</nav> 
<!--- Script for Side Navigation Personal---> 
<script> 
    function w3_openpers() { 
     document.getElementsByClassName("w3-sidenav")[0].style.width = "20%"; 
     document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center"; 
     document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px"; 
     document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%"; 
     document.getElementsByClassName("w3-sidenav")[0].style.display = "block"; 
     document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1"; 
    } 
    function w3_closepers() { 
     document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; 
    } 
</script> 
<!--- Side Navigation Professional---> 
<nav id="profnav" class="w3-sidenav w3-white w3-card-2 w3-animate-right" style="display:none;z-index:5"> 
    <a href="javascript:void(0)">Link 4</a>  
    <a href="javascript:void(0)">Link 5</a>  
    <a href="javascript:void(0)">Link 6</a> 
    <br> 
    <a href="javascript:void(0)" onclick="w3_closeprof()" class="w3-closenav w3-text-theme w3-text-red" >Close &times;</a>  
</nav> 
<!--- Script for Side Navigation Professional---> 
<script> 
    function w3_openprof() { 
     document.getElementsByClassName("w3-sidenav")[0].style.width = "20%"; 
     document.getElementsByClassName("w3-sidenav")[0].style.textAlign = "center"; 
     document.getElementsByClassName("w3-sidenav")[0].style.fontSize = "30px"; 
     document.getElementsByClassName("w3-sidenav")[0].style.paddingTop = "20%"; 
     document.getElementsByClassName("w3-sidenav")[0].style.display = "block"; 
     document.getElementsByClassName("w3-sidenav")[0].style.opacity = "1"; 
    } 
    function w3_closeprof() { 
     document.getElementsByClassName("w3-sidenav")[0].style.display = "none"; 
    } 
</script> 

Answer 1

我會建議使它更簡單，僅通過使一個功能：

function w3_open(elNum) { 
 
    var el = document.getElementsByClassName("w3-sidenav")[elNum]; 
 
    el.style.width = "20%"; 
 
    el.style.textAlign = "center"; 
 
    el.style.fontSize = "30px"; 
 
    el.style.paddingTop = "20%"; 
 
    el.style.display = "block"; 
 
    el.style.opacity = "1"; 
 
} 
 
function w3_close(elNum) { 
 
    document.getElementsByClassName("w3-sidenav")[elNum].style.display = "none"; 
 
}

然後你只需把它想：

<a title="Personal Information" onclick="w3_open(0)" class="w3-btn-floating w3-card-8 w3-animate-bottom w3-ripple w3-theme w3-red"><i class="fa fa-plus"></i></a> 

與定位第一個導航的w3_open(0)，以及w3_open(1)將針對第二個。 與關閉功能相同。
你可以把它更簡單由具有CSS類：

function w3_toggle(elNum) { 
 
     document.getElementsByClassName("w3-sidenav")[elNum].classList.toggle("w3_open"); 
 
    }

.w3_sidenav.w3_open{ 
 
    width:20%; 
 
    text-align:center; 
 
    font-size:30px; 
 
    padding-top:20%; 
 
    display:block; 
 
    opacity:1; 
 
}

那麼你就只需要一個功能，你只需把它w3_toggle(0)來切換導航開啓/關閉。

Answer 2

嘗試使用getElementsById代替getElementsByClassName方法

Answer 3

了尖端更改第二個腳本：

<script> 
function w3_openprof() { 
    document.getElementsByClassName("w3-sidenav")[1].style.width = "20%"; 
    document.getElementsByClassName("w3-sidenav")[1].style.textAlign = "center"; 
    document.getElementsByClassName("w3-sidenav")[1].style.fontSize = "30px"; 
    document.getElementsByClassName("w3-sidenav")[1].style.paddingTop = "20%"; 
    document.getElementsByClassName("w3-sidenav")[1].style.display = "block"; 
    document.getElementsByClassName("w3-sidenav")[1].style.opacity = "1"; 
} 
function w3_closeprof() { 
    document.getElementsByClassName("w3-sidenav")[1].style.display = "none"; 
} 
</script> 

的偉大工程！