Javascript: развернуть элемент при нажатии, но уменьшить относительные элементы?

84
14

Я пытаюсь подражать Javascript 30 Flex Panel Image Gallery, но без использования Flexbox.

В принципе, у нас есть группа divs, расположенных рядом друг с другом. Когда один щелкнут, остальные сжимаются.

Я не могу понять, как выбрать относительные unclicked элементы, чтобы добавить класс .shrink.

Ниже приведены разметки. Заранее спасибо!

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

var panels = document.querySelectorAll(".panel");

panels.forEach(function(panel) {
panel.addEventListener("click", function() {
this.classList.toggle("active");
});
});

.container {
margin: 0 auto;
text-align: center;
width: 500px;
}

.panel {
display: inline-block;
transition: width 1s;
width: 30%;
}

.panel1 {
background-color: red;
}

.panel2 {
background-color: green;
}

.panel3 {
background-color: blue;
}

.active {
transition: width 1s;
width: 40%;
}

.shrink {
transition: width 1s;
width: 8.5%;
}

<div class="container"
><div class="panel1 panel">Red</div
><div class="panel2 panel">Green</div
><div class="panel3 panel">Blue</div
></div>

спросил(а) 2017-10-30T20:14:00+03:00 3 года, 1 месяц назад
1
Решение
59

Предполагая, что каждый без щелчка div должен сжиматься, добавьте active к тому, который был нажат, и удалите из него shrink. Затем прокрутите панели, и для каждого, который не был нажат, сделайте обратное.

var panels = document.querySelectorAll(".panel");

function togglePanels()
{
this.classList.add("active");
this.classList.remove("shrink");
for (var i = 0; i < panels.length; i ++)
{
var panelToToggle = panels[i];
if (panelToToggle !== this)
{
panelToToggle.classList.add("shrink")
panelToToggle.classList.remove("active");
}
}
}

panels.forEach(function(panel){
panel.addEventListener("click", togglePanels);
});

.container {
margin: 0 auto;
text-align: center;
width: 500px;
}

.panel {
display: inline-block;
transition: width 1s;
width: 30%;
}

.panel1 {
background-color: red;
}

.panel2 {
background-color: green;
}

.panel3 {
background-color: blue;
}

.active {
transition: width 1s;
width: 40%;
}

.shrink {
transition: width 1s;
width: 8.5%;
}

<div class="container">
<div class="panel1 panel">Red</div><div class="panel2 panel">Green</div><div class="panel3 panel">Blue</div>
</div>

ОБНОВЛЕНИЕ: я просто посмотрел на гибкую панель на указанном вами сайте, и одна вещь, отсутствующая в приведенном выше, - если вы нажмете расширенный div, он сбрасывает все в нормальное состояние. Для этого вам просто нужно проверить, active ли нажатый div, и если да, разделите оба класса со всех панелей. Не уверен, что эта часть вашего требования или нет, но если да, вот как.

var panels = document.querySelectorAll(".panel");

function resetPanels()
{
for (var i = 0; i < panels.length; i ++)
{
var panelToToggle = panels[i];
panelToToggle.classList.remove("shrink");
panelToToggle.classList.remove("active");
}
}

function expandPanel(panelToExpand)
{
panelToExpand.classList.add("active");
panelToExpand.classList.remove("shrink");
for (var i = 0; i < panels.length; i ++)
{
var panelToToggle = panels[i];
if (panelToToggle !== panelToExpand)
{
panelToToggle.classList.add("shrink")
panelToToggle.classList.remove("active");
}
}
}

function togglePanels()
{
if (this.classList.contains("active"))
{
resetPanels();
}
else
{
expandPanel(this);
}
}

panels.forEach(function(panel){
panel.addEventListener("click", togglePanels);
});

.container {
margin: 0 auto;
text-align: center;
width: 500px;
}

.panel {
display: inline-block;
transition: width 1s;
width: 30%;
}

.panel1 {
background-color: red;
}

.panel2 {
background-color: green;
}

.panel3 {
background-color: blue;
}

.active {
transition: width 1s;
width: 40%;
}

.shrink {
transition: width 1s;
width: 8.5%;
}

<div class="container">
<div class="panel1 panel">Red</div><div class="panel2 panel">Green</div><div class="panel3 panel">Blue</div>
</div>

ответил(а) 2017-10-30T20:26:00+03:00 3 года, 1 месяц назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема