javascript - 如何让一个 div 展开全宽同时隐藏另一个 div

Question

您好，我需要使点击的 div 展开全宽。同时我需要没有被点击的div从屏幕上消失。这也需要能够切换。因此，当您再次单击该按钮时，该 div 将缩小而另一个 div 将重新出现。我有一个代码笔可以更好地说明我的意思 https://codepen.io/dmking0728/pen/abbroYj

const viewButtons = document.querySelectorAll(".view-now");

const clickHandler = event => {
  //add "expand" class to div that was clicked
  const propertyDiv = event.target.closest(".property");
  propertyDiv.classList.toggle("expand");

  //if class name = 'property' then display none. this gets rid of the other div on the screen
  const allProps = document.querySelectorAll(".property");
  for (i = 0; i < allProps.length; i++) {
    if (allProps[i].className == 'property') {
      allProps[i].style.display = "none";
    }
  }
};

viewButtons.forEach(item => {
  item.addEventListener("click", clickHandler);
});

Answer 1

您可以使用一个类来切换查看模式状态(所有属性默认为 display: none;)。然后是另一个类来显示事件的点击属性。

.property.viewing {
  display: none;
}

.property.viewing.active {
  display: block;
  width: 100%;
}

在您的点击处理程序中，您只需要切换类(.viewing 全部，.active 被点击)

const clickHandler = event => {

  //toggle viewing class on all .property elements
  $(".property").toggleClass("viewing");

  //add "active" class to div that was clicked
  const propertyDiv = event.target.closest(".property");
  propertyDiv.classList.toggle("active");

};