如何隱藏菜單選項與JavaScript而調用菜單作爲MySQL獲取數組

Question

有關下拉菜單的答案很多。但我從數據庫調用菜單項。

如果我點擊某個菜單項（$table[0]），則會顯示內容（' . $table[0] . ' - content），如果再次單擊，則內容會消失。到現在爲止還挺好。

問題是，如果某些內容已經打開，並且我點擊另一個菜單項，我會打開這兩個內容。如何允許只打開最後選中並仍然保持切換功能...？

我已經嘗試了很多東西，這就是其中之一：

<?php 
include 'connect_database.php'; 
$result = mysqli_query($con, "show tables"); 
while($table = mysqli_fetch_array($result)) { 
echo '<button onclick="' . $table[0] . 'myFunction()">' . $table[0] . '</button><br /> 
    <div id="' . $table[0] . '" style="display:none;" class="tabcontent">' . $table[0] . ' - content</div> 
    <script> 
    function ' . $table[0] . 'myFunction() { 
    var x = document.getElementById("' . $table[0] . '"); 
    if (x.style.display === "none") { 
    x.style.display = "block"; 
    } else { 
    x.style.display = "none"; 
    }} 
    </script>'; 
} 
?> 

非常感謝

Answer 1

你的問題是你不跟蹤所有創建的菜單。 也myFunction是所有的人都一樣的，所以很可能是隻夠一個:) 確定我會做這樣的：

<?php 
    include 'connect_database.php'; 

    $result = mysqli_query($con, "show tables"); 
    while($table = mysqli_fetch_array($result)) { 
     $name = $table[0]; 
     echo "<button onclick='myFunction(\"$name\")'>$name</button><br /><div id='$name' style='display:none;' class='tabcontent'>$name - content</div>"; 
    } 
?> 
<script> 
    function myFunction(id) { 
    registerId(id); 
    hideAll(id); 

    var x = document.getElementById(id), 
     s = x.style.display; 

     x.style.display = (s === "none") ? "block" : "none"; 
    } 
    // register a new id so we know what to hide when needed 
    function registerId (id) { 
    var m = window.myMenus = window.myMenus || []; 

    if(m.indexOf(id) === -1) { 
     m.push(id); 
    } 
    } 

    // hide all registered menus except the id 
    function hideAll(id) { 
    var m = window.myMenus = window.myMenus || [], 
     i, l=m.length; 

    for(i=0;i<l;i++){ 
     if(m[i] == id) continue; 
     var x = document.getElementById(m[i]); 

     x.style.display = 'none'; 
    } 

    } 
</script> 

或者你可以跟蹤最後打開的唯一的密切：d

php code remains the same as before 
<script> 
    function myFunction(id) { 
     var x,old; 

    if(old = window.lastOpenId) { 
     x = document.getElementById(old); 
     x.style.display = "none"; 
     delete window.lastOpenId; 
    } 

    if(id != old) { 
     x = document.getElementById(id); 
     x.style.display = "block"; 
     window.lastOpenId = id; 
    } 
    } 
</script> 

注意，在兩種情況下，script是while環外側和php代碼外，使它僅需要一次打印。

Answer 2

簡單，你必須關閉所有的元素被點擊元素時。我會選擇黑客入門，儘管它可以通過多種方式完成：

<?php 
include 'connect_database.php'; 
$result = mysqli_query($con, "show tables"); 
while($table = mysqli_fetch_array($result)) { 
echo '<button onclick="' . $table[0] . 'myFunction()">' . $table[0] . '</button><br /> 
    <div id="' . $table[0] . '" style="display:none;" class="tabcontent">' . $table[0] . ' - content</div> 
    <script> 
    function ' . $table[0] . 'myFunction() { 
     var x = document.getElementById("' . $table[0] . '"); 
     if (x.style.display === "none") { 
      x.style.display = "block"; 
     } else { 
      x.style.display = "none"; 
     } 
     // Select all elements 
     var els = document.querySelectorAll(".tabcontent); 
     for (var i = 0, el; el = els[i]; i++) { 
      if (el != x) { // Do not hide current element 
       x.style.display = "none"; 
      } 
     } 
    } 
    </script>'; 
} 
?> 

Protip：保持縮進清晰。