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

单击元素时，只需关闭所有元素即可。我会选择类选择黑客，虽然它可以通过多种方式完成：

<?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：保持你的缩进清洁。

Answer 2

您的问题是您没有跟踪创建的所有菜单。另外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代码之外，因此只需打印一次。

如何在调用菜单作为mysql fetch数组时用javascript隐藏菜单选项

2 个答案: