Javascript закрыть переключатель с помощью кнопки - PullRequest
Новая
       0

Javascript закрыть переключатель с помощью кнопки

0 голосов
/ 24 марта 2020

Я пытаюсь показать и скрыть содержимое, используя только javascript, html и css. Мне удалось получить кнопку, чтобы показать и скрыть информацию на странице, но я не смог получить кнопку закрытия, чтобы скрыть информацию. 

"use strict";
// /*Show Nutritional information results*/
const buttons = document.querySelectorAll(".contentButton");
for (const b of buttons) {
  b.addEventListener('click', ev => {
    ev.target.classList.toggle("on");
  })
}
.contentButton {
  background-color: #008CBA;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  width: 200px;
  height: 30px;
  border-radius: 7px;
}

.contentButton.on+div {
  display: block;
}

.content {
  display: none;
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100px;
  background-color: #000000;
  width: 50%;
  margin: 10% auto;
  color: blue;
}
<h2>Item List</h2>
<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">loooaads of stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item2">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item3">
  <button class="contentButton">toggle</button>
  <div class="content">mooooreeee stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item4">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item5">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

Может кто-нибудь помочь, чтобы кнопка закрытия скрывала содержимое, когда оно открыто.

Ответы [ 2 ]

0 голосов
/ 24 марта 2020

Я бы переместил класс on вверх, чтобы он был относительно родительского содержимого. 

div[class^="Item"].on div.content,
div[class^="Item"].on button.close {
  display: block;
}

div.content,
button.close {
  display: none;
}

Тогда все, что вам нужно сделать, это получить родительский элемент целевой кнопки и переключить класс.

Если вы можете, я бы добавил дополнительный класс ко всем предметам, чтобы их было легче идентифицировать в CSS. 

div.expandable-content.on div.content {
  display: block;
}

<div class="expandable-content Item1">
  <button class="contentButton">toggle</button>
  <div class="content">loooaads of stuff goes here</div>
  <button class="close">Close</button>
</div>
<!-- ...etc -->

Пример 

const queryAll = (selector) => Array.from(document.querySelectorAll(selector))

const showContent = (button, visible) => {
  button.parentElement.classList.toggle('on', visible)
}

queryAll(".contentButton").forEach(button => {
  button.addEventListener('click', e => {
    showContent(e.target, true)
  })
})

queryAll(".close").forEach(closeBtn => {
  closeBtn.addEventListener('click', e => {
    showContent(e.target, false)
  })
})
.contentButton {
  background-color: #008CBA;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  width: 200px;
  height: 30px;
  border-radius: 7px;
}

div[class^="Item"].on div.content {
  display: block;
}

div[class^="Item"].on button.close {
  display: block;
}

.close {
  display: none;
}

.content {
  display: none;
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100px;
  background-color: #000000;
  width: 50%;
  margin: 10% auto;
  color: blue;
}
<h2>Item List</h2>
<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">loooaads of stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item2">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item3">
  <button class="contentButton">toggle</button>
  <div class="content">mooooreeee stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item4">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item5">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">stuff goes here</div>
  <button class="close">Close</button>
</div>

Со встроенной кнопкой закрытия необходимо получить содержимое (родительский) для кнопки, прежде чем вы сможете получить упаковочный div (дедушка). 

const queryAll = (selector) => Array.from(document.querySelectorAll(selector))

const showContent = (button, visible) => {
  button.parentElement.classList.toggle('on', visible)
}

queryAll(".contentButton").forEach(button => {
  button.addEventListener('click', e => {
    showContent(e.target, true)
  })
})

queryAll(".close").forEach(closeBtn => {
  closeBtn.addEventListener('click', e => {
    showContent(e.target.parentElement, false)
  })
})
.contentButton {
  background-color: #008CBA;
  color: white;
  text-align: center;
  text-decoration: none;
  font-size: 20px;
  width: 200px;
  height: 30px;
  border-radius: 7px;
}

div[class^="Item"].on div.content {
  display: block;
}

div[class^="Item"].on button.close {
  display: block;
}

.close {
  display: none;
}

.content {
  display: none;
  position: relative;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100px;
  background-color: #000000;
  width: 50%;
  margin: 10% auto;
  color: blue;
}
<h2>Item List</h2>
<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">
    loooaads of stuff goes here
    <button class="close">Close</button>
  </div>
</div>

<div class="Item2">
  <button class="contentButton">toggle</button>
  <div class="content">
    stuff goes here
    <button class="close">Close</button>
  </div>
</div>

<div class="Item3">
  <button class="contentButton">toggle</button>
  <div class="content">
    mooooreeee stuff goes here
    <button class="close">Close</button>
  </div>
</div>

<div class="Item4">
  <button class="contentButton">toggle</button>
  <div class="content">
    stuff goes here
    <button class="close">Close</button>
  </div>
</div>

<div class="Item5">
  <button class="contentButton">toggle</button>
  <div class="content">
    stuff goes here
    <button class="close">Close</button>
  </div>
</div>

<div class="Item1">
  <button class="contentButton">toggle</button>
  <div class="content">
    stuff goes here
    <button class="close">Close</button>
  </div>
</div>
0 голосов
/ 24 марта 2020

Вы можете использовать: 

const buttons = document.querySelectorAll(".contentButton");
const closebtns = document.querySelectorAll(".close");
  for (const b of buttons) {
    b.addEventListener('click', ev => {
      ev.target.classList.toggle("on");
    })
  }  
  for (const c of closebtns) {
    c.addEventListener('click', ev => {
      ev.target.closest("div").querySelector(".contentButton").classList.toggle("on");
    })
  }

Объяснение:

  • document.querySelectorAll(".close") получить все кнопки закрытия и добавить прослушиватель событий щелчка для всех из них.
  • ev.target.closest("div") получить ближайший div к текущей нажатой кнопке закрытия.
  • closest("div").querySelector(".contentButton") - найти contentButton внутри родительского div и переключить класс on на этом элементе.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...