Javascript: развернуть элемент при нажатии, но уменьшить относительные элементы?
Я пытаюсь подражать 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>
Предполагая, что каждый без щелчка 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>