HTML: Показать / скрыть разные div с одной и той же функцией, но не одновременно - PullRequest
Новая
       6

HTML: Показать / скрыть разные div с одной и той же функцией, но не одновременно

0 голосов
/ 06 августа 2020

У меня проблема с моей структурой, я хочу иметь разные 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>

Ответы [ 2 ]

3 голосов
/ 06 августа 2020

Используйте 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>
0 голосов
/ 06 августа 2020

Каждый раз, когда у вас есть onclick, вы автоматически получаете доступ к событию. если мы посмотрим на event.target.parentNode, мы получим необходимый элемент. 

function OpenHideFlexColumn() {    
  var e = event.target.parentNode
  var x = e.parentNode.parentNode.parentNode.querySelector('.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;
    }
<!DOCTYPE html>
<html>
<head>
  

</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();">
          <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>


</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...