时间戳

首页 > 解决方案 > HTML：显示/隐藏具有相同功能但不同时的不同 div

javascript - HTML：显示/隐藏具有相同功能但不同时的不同 div

问题描述

我的结构有问题，我想要不同的 div，每个 div 都有标题和正文，它们被缺陷隐藏。每个 div 的标题中都有一个按钮，如果单击它的按钮，则显示每个 div 的主体。如果再次按下相同的按钮，身体会再次隐藏。我想用相同的函数来做，因为我会生成越来越多的这个 div，这就是为什么我不能一次又一次地复制相同的函数。有没有办法做到这一点？有我的代码：

function OpenHideFlexColumn() {
  var x = document.getElementById("Body");
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }
}
body {
  background-color: lightblue;
}

a {
  outline: 0;
  text-decoration: none;
}

.area {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.module {
  height: auto;
  width: auto;
  margin: 11px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  background-color: white;
}

.header {
  height: auto;
  width: 100%;
  display: inline-flex;
  font-size: 24px;
}

.options {
  height: auto;
  width: auto;
  margin-left: auto;
  margin-right: 0;
  display: inline-flex;
}

.button {
  height: 20px;
  width: auto;
  padding: 5px;
  background-color: lightgrey;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.body {
  height: auto;
  width: auto;
  display: none;
  flex-direction: column;
}
<div id="infocontent-1" class="area">
  <!--MODULE-->
  <div class="module">
    <div class="header">
      <b>Title</b>
      <div class="options">
        <!-- Other function button-->
        <a class="button">
                        ..
                    </a>
        <!--Hide/Show button-->
        <a class="button" onclick="OpenHideFlexColumn();">
          <b>Push me to Open/Hide</b>
        </a>
      </div>
    </div>
    <div class="body" id="Body">
      Body text.....
    </div>
  </div>

  <!--MODULE 2-->
  <div class="module">
    <div class="header">
      <b>Title</b>
      <div class="options">
        <!-- Other function button-->
        <a class="button">
              ..
            </a>
        <!--Hide/Show button-->
        <a class="button" onclick="OpenHideFlexColumn();">
          <b>Push me to Open/Hide</b>
        </a>
      </div>
    </div>
    <div class="body" id="Body">
      Body text.....
    </div>
  </div>
</div>

标签： javascripthtmlcss

解决方案

使用this内部函数和parentNode

    <!DOCTYPE html>
<html lang="es">
<head>
  <style>

  body{
    background-color: lightblue;
  }

    a {
      outline: 0;
      text-decoration: none;
    }
    .area{
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .module{
      height: auto;
      width: auto;
      margin: 11px;
      padding: 11px;
      display: flex;
      flex-direction: column;
      background-color: white;
    }

    .header{
      height: auto;
      width: 100%;
      display: inline-flex;
      font-size: 24px;
    }

    .options{
      height: auto;
      width: auto;
      margin-left: auto;
      margin-right: 0;
      display: inline-flex;
    }

    .button{
      height: 20px;
      width: auto;
      padding: 5px;
      background-color: lightgrey;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 8px;
    }

    .body{
      height: auto;
      width: auto;
      display: none;
      flex-direction: column;
    }
  </style>

</head>
<body>  

<div id="infocontent-1" class="area">
    <!--MODULE-->
    <div class="module">
        <div class="header">
             <b>Title</b>
            <div class="options">
        <!-- Other function button-->
                <a class="button">
                    ..
                </a>
        <!--Hide/Show button-->
                <a class="button" onclick="OpenHideFlexColumn(this);">
          <b>Push me to Open/Hide</b>
        </a>
            </div>
        </div>
        <div class="body" id="Body">
            Body text.....
        </div>
    </div>

  <!--MODULE 2-->
  <div class="module">
    <div class="header">
       <b>Title</b>
      <div class="options">
        <!-- Other function button-->
        <a class="button">
          ..
        </a>
        <!--Hide/Show button-->
        <a class="button" onclick="OpenHideFlexColumn(this);">
          <b>Push me to Open/Hide</b>
        </a>
      </div>
    </div>
    <div class="body" id="Body">
        Body text.....
    </div>
  </div>
</div>

<script>

 function OpenHideFlexColumn(e) {
  var x = e.parentNode.parentNode.parentNode.querySelector('.body');
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }
}

</script>
</body>
</html>

推荐阅读