Javascript：单击时展开元素，但缩小相关元素？

Question

我试图模仿Javascript 30的Flex Panel图库，但没有使用Flexbox。

基本上，我们有一组div彼此相邻。点击一个，其他人缩小。

我无法弄清楚如何选择相对未被忽略的元素，以添加.shrink类。

以下是标记。提前谢谢！

**抱歉将div放在一起 - 这是为了避免空白..

＆＃13;

＆＃13;

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

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

假设每个未单击的div都应缩小，然后将active添加到已单击的div中，并从中删除shrink。  然后在你的面板上循环，对于那些不是被点击的面板，请做相反的事情。

＆＃13;

＆＃13;

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);
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：我刚看了你提到的网站上的flex面板，上面缺少一件事，如果点击一个展开的div，它会全部重置为正常。要做到这一点，你只需检查点击的div是否有active，如果是，则从所有面板中删除这两个类。不确定这是否属于您的要求，但如果是，请查看方法。

＆＃13;

＆＃13;

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);
});

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;