Question

当我点击任何一个 div 时，我想隐藏其他打开的 div（在我的代码中它是 .ac_container）我尝试了很多东西，但它们在按钮或标签中有效，但在复选框中不起作用。

<div class="container">
    <h1>Indian Food Categories</h2>
    <label class="ac_trigger" for="ac1">Beverages</label>
    <input type="checkbox" class="ac_hide"  onclick="showHide(this)" id="ac1" name="x1">
    <div class="ac_container" style="margin-top: -1px;">
        {% for a,b in beverages.items %}
        <table class="foods" style="border-bottom:1px solid #044b6b;width: 100%">
            <tr>
                <th style="text-align: left;color: #00FFFF;" id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
            </tr>
        </table>
        {% endfor %}
    </div>
    
    <label class="ac_trigger" for="ac2">Cereals And Grains</label>
    <input type="checkbox" class="ac_hide" onclick="showHide(this)" id="ac2" name="x1">
    <div class="ac_container"  style="margin-top: -1px;">
        {% for a,b in cerials.items %}
        <table class="foods" style="border-bottom:1px solid #044b6b;width: 100%">
            <tr>
                <th style="text-align: left;color: #00FFFF;" id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
            </tr>
        </table>
        {% endfor %}            
    </div>
</div>

Answer 1

您可以在 javascript 中使用 CSS 属性 display: none。

您可以尝试以下功能。（已编辑）

function showHide(tagData, divId){
          let allInputs = ['ac1', 'ac2'];
          let divToChange = document.getElementById(divId);
          divToChange.style.display = tagData.checked ? "block" : "none";
          if(tagData.checked){
          for(let i = 0 ; i < allInputs.length ; i++){
            if(tagData.id !== allInputs[i]) {
              let divToHideId = 'div'+allInputs[i].substr(allInputs[i].length -1)
              document.getElementById(divToHideId).style.display = 'none'
              document.getElementById(allInputs[i]).checked = false
            }
          }
          }
         };

您必须在函数调用中传递“this”和“div Id”，以便函数知道要隐藏/取消隐藏哪个 div。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <h1>Indian Food Categories</h2>
      <div style="flex: 1">
          <label class="ac_trigger" for="ac1">Beverages</label>
          <input type="checkbox" class="ac_hide"  onclick="showHide(this, 'div1')" id="ac1" name="x1">
      </div>
      <div class="ac_container" id="div1" style="margin-top: -1px;display: none">
          {% for a,b in beverages.items %}
          <table class="foods" style="border-bottom:1px solid #044b6b;width: 100%">
              <tr>
                  <th style="text-align: left;color: #00FFFF;" id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
              </tr>
          </table>
          {% endfor %}
      </div>
      <div style="flex: 1" >
        <label class="ac_trigger" for="ac2">Cereals And Grains</label>
        <input type="checkbox" class="ac_hide" onclick="showHide(this, 'div2')" id="ac2" name="x1">
      </div>
      <div class="ac_container" id='div2'  style="margin-top: -1px;display: none">
          {% for a,b in cerials.items %}
          <table class="foods" style="border-bottom:1px solid #044b6b;width: 100%">
              <tr>
                  <th style="text-align: left;color: #00FFFF;" id="{{b}}">{{b}}</th><td><input type="number" name="{{a}}" value="0" id="{{a}}"></td>
              </tr>
          </table>
          {% endfor %}            
      </div>
      
  </div>  
  
  <script>
  function showHide(tagData, divId){
    let allInputs = ['ac1', 'ac2'];
   let divToChange = document.getElementById(divId);
   divToChange.style.display = tagData.checked ? "block" : "none";
   if(tagData.checked){
   for(let i = 0 ; i < allInputs.length ; i++){
     if(tagData.id !== allInputs[i]) {
       let divToHideId = 'div'+allInputs[i].substr(allInputs[i].length -1)
       document.getElementById(divToHideId).style.display = 'none'
       document.getElementById(allInputs[i]).checked = false
     }
   }
   }
   
  };
  </script>
  </body>
</html>

处理上述代码的两件事

如果您指定复选框 id 'ac1'，则相应的 div id 应为 'div1'。（如果复选框 id 是 'ac2'，则 div id 将是 'div2'）
您必须在 (showHide();) 函数的开头指定数组中的所有复选框 ID。例如

let allInputs = ['ac1', 'ac2'];

Answer 2

我有一个更好的解决方案。您可以使用选项卡而不是做您现在正在做的事情。使用选项卡，您可以用另一个替换当前 div 内容。它很容易并且使用率很高。

转到此 w3School link 以进一步了解标签是什么。希望这能帮到你。

单击任何一个 div 隐藏其他 div

2 个答案: