Переключить отображение/скрытие функций между несколькими div

У меня есть страница на моем сайте, которая имеет 3 отдельных «скрытых» div. Каждый со своей собственной кнопкой «показать/скрыть».

  • В настоящее время... каждый набор div и кнопок работает независимо.
  • Поэтому... если все div отображаются (открыты) одновременно, они складываются в соответствии с их порядком.

Вместо этого я бы предпочел немного ограничить функцию, чтобы одновременно можно было показывать (открывать) только div.

Пример: если отображается Div 1, а затем пользователь нажимает кнопку Div 2 (или Dive 3), Div 1 (или любой другой открытый в данный момент div) закроется.

Я не уверен, как настроить мой код, чтобы все работало вместе. Я попробовал несколько идей, но все они были тщетными. Поэтому я разместил общую «независимую» версию ниже.

function show_Div_1() {
  var div1 = document.getElementById("Div_1");
  if (div1.style.display === "none") {
    div1.style.display = "block";
  } else {
    div1.style.display = "none";
  }
}

function show_Div_2() {
  var div2 = document.getElementById("Div_2");
  if (div2.style.display === "none") {
    div2.style.display = "block";
  } else {
    div2.style.display = "none";
  }
}

function show_Div_3() {
  var div3 = document.getElementById("Div_3");
  if (div3.style.display === "none") {
    div3.style.display = "block";
  } else {
    div3.style.display = "none";
  }
}
.div {
  width: 270px;
  height: 30px;
  padding-left: 10px;
}
<button type = "button" onclick = "show_Div_1()">Div 1 - Red</button>
<button type = "button" onclick = "show_Div_2()" style = "margin-left: 4px">Div 2 - Blue</button>
<button type = "button" onclick = "show_Div_3()" style = "margin-left: 4px">Div 3 - Green</button>
<div id = "Div_1" class = "div" style = "background-color:red; display: none;"></div>
<div id = "Div_2" class = "div" style = "background-color:blue; display: none;"></div>
<div id = "Div_3" class = "div" style = "background-color:green; display: none;"></div>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
63
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это можно сделать разными способами. Я думаю, что лучший подход в вашем случае может быть

КНОПКИ

<button type = "button" onclick = "show_div('Div_1')">Div 1 - Red</button>

<button type = "button" onclick = "show_div('Div_2')" style = "margin-left: 4px">Div 2 - Blue</button>

<button type = "button" onclick = "show_div('Div_3')" style = "margin-left: 4px">Div 3 - Green</button>

СЦЕНАРИЙ

function show_div(div_id) {
    var thisDiv = document.querySelector('#'+div_id);
    var thisState = thisDiv.style.display;
    // close all in any cases
    document.querySelectorAll('.div').forEach(function(el) {
        el.style.display = "none";
    });
    // open this div only if it was closed
    if (thisState == "none" ){
        thisDiv.style.display = "block";
    }
}
Ответ принят как подходящий

Я бы предложил использовать атрибуты данных для переключателя. Почему? вы можете использовать CSS для них, и вы можете использовать больше, чем просто переключатель - несколько «значений».

Здесь, в этом примере, я делаю ваш «щелчок», но также добавил двойной щелчок по кнопке для третьего значения. Попробуйте несколько кликов и двойных кликов!

Возможно, немного излишне, но больше, чем просто «переключение», например, вы можете использовать это, чтобы показать «состояния» таких вещей, как стоп-сигнал или любое количество вещей.

Используйте отображение grid и перемещайте их, просто добавляя значение атрибута данных и дважды щелкая по нему, чтобы заставить его перейти (с помощью css) к некоторым grid-area: и тому подобное.

const hideValues = {
  hide: "hidden",
  show: "showme",
  double: "dblclick"
};

function dblClickHander(event) {
  const targetSelecor = event.target.dataset.target;
  const target = document.querySelector(targetSelecor);
  const action = target.dataset.hideme == hideValues.double ? hideValues.hide : hideValues.double;
  const toggleTargets = document.querySelectorAll('.toggle-target');
  toggleTargets.forEach(el => {
    el.dataset.hideme = hideValues.hide;
  });
  target.dataset.hideme = action;
}

function toggleEventHandler(event) {
  const targetSelecor = event.target.dataset.target;
  const target = document.querySelector(targetSelecor);
  const showHide = target.dataset.hideme == hideValues.hide ? hideValues.show : hideValues.hide;
  const toggleTargets = document.querySelectorAll('.toggle-target');
  toggleTargets.forEach(el => {
    el.dataset.hideme = hideValues.hide;
  });
  target.dataset.hideme = showHide;
}

/* set up event handlers on the buttons */
const options = {
  capture: true
};
/* we do this first to prevent the click from happening */
const toggleButtons = document.querySelectorAll('.toggle-button');
toggleButtons.forEach(el => {
  el.addEventListener('dblclick', dblClickHander, options);
});
toggleButtons.forEach(el => {
  el.addEventListener('click', toggleEventHandler, options)
});
.toggle-target {
  width: 270px;
  height: 30px;
  padding-left: 10px;
}

.toggle-target[data-hideme = "hidden"] {
  display: none;
}

.toggle-target[data-hideme = "showme"] {
  display: block;
}

.toggle-target[data-hideme = "dblclick"] {
  display: block;
  border: solid 2px green;
  padding: 1rem;
  opacity: 0.50;
}

.red-block {
  background-color: red;
}

.blue-block {
  background-color: blue;
}

.green-block {
  background-color: green;
}
<button type = "button" class = "toggle-button" data-target = ".red-block">Div 1 - Red</button>
<button type = "button" class = "toggle-button" data-target = ".blue-block">Div 2 - Blue</button>
<button type = "button" class = "toggle-button" data-target = ".green-block">Div 3 - Green</button>
<div class = "toggle-target red-block" data-hideme = "hidden">red</div>
<div class = "toggle-target blue-block" data-hideme = "hidden">blue</div>
<div class = "toggle-target green-block" data-hideme = "hidden">green</div>

Другие вопросы по теме