时间戳

首页 > 解决方案 > 点击事件监听器不会改变高度

javascript - 点击事件监听器不会改变高度

问题描述

我想要构建的是：我有两个 div，里面有两个 div。最初，内部 div 的高度为 0。我已将事件侦听器添加到外部 div，当我单击 div 时，内部的高度变为 50px。此外，我已将事件侦听器添加到内部 div，当我单击时，我希望内部潜水的高度再次变为 0，但它不起作用。每个其他 CSS 属性（如宽度或颜色）都有效。下面是代码。

const mainContainer = document.querySelectorAll(".mainContainer");
const subMenu = document.querySelectorAll(".subMenu");

mainContainer.forEach(function(element, index) {
  element.addEventListener("click", function() {
    subMenu[index].style.height = "50px";
  })
})

subMenu.forEach(function(element, index) {
  element.addEventListener("click", function() {
    this.style.height = "10px";
  })
})
* {
  margin: 0;
  padding: 0;
}

#container {
  border: 1px solid red;
  width: 50%;
}

#mainContainer {
  border: 1px solid;
  position: relative;
  width: 100%;
}

.subMenu {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 0px;
  background-color: green;
  top: 0;
  left: 0;
  transition: height 0.5s;
}
<div id="container">
  <div class="mainContainer">
    <p>this is the main box</p>
    <p>tha provides the main categories</p>
    <div class="subMenu">
      <p>This is the sub menu</p>
      <p>Lets build it</p>
      <p>Yes we do</p>
    </div>
  </div>
  <div class="mainContainer">
    <p>this is the main box</p>
    <p>tha provides the main categories</p>
    <div class="subMenu">
      <p>This is the sub menu</p>
      <p>Lets build it</p>
      <p>Yes we do</p>
    </div>
  </div>
</div>

标签： javascripthtmlcss

解决方案

问题是您已将两个事件侦听器附加到元素并且同时触发，并且扩展处理程序覆盖了折叠处理程序： 在此处输入图像描述

原因是每当您单击子元素时，它会将单击事件传递给父元素，这也会再次更改属性。您可以在子点击函数中使用 stopPropagation() 来停止点击事件的传播。检查下面的更新代码。 https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation （感谢@Himanshu Budhiraja）这个很好的解释

您没有提到预期的行为，我根据您设置的属性假设您希望它展开和折叠。使用内联样式控制样式并不是最佳实践。最好添加或删除类，例如这里，我添加了类“.expanded”，我使用classList来打开和关闭它

const mainContainer = document.querySelectorAll(".mainContainer");
const subMenu = document.querySelectorAll(".subMenu");

mainContainer.forEach(function(element, index) {
  element.addEventListener("click", function() {
    subMenu[index].classList.toggle("expanded");
  });
});
* {
  margin: 0;
  padding: 0;
}

#container {
  border: 1px solid red;
  width: 50%;
}

#mainContainer {
  border: 1px solid;
  position: relative;
  width: 100%;
}

.subMenu {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 0px;
  background-color: green;
  top: 0;
  left: 0;
  transition: height 0.5s;
}

.expanded {
  height: 50px;
}
<div id="container">
  <div class="mainContainer">
    <p>this is the main box</p>
    <p>tha provides the main categories</p>
    <div class="subMenu">
      <p>This is the sub menu</p>
      <p>Lets build it</p>
      <p>Yes we do</p>
    </div>
  </div>
  <div class="mainContainer">
    <p>this is the main box</p>
    <p>tha provides the main categories</p>
    <div class="subMenu">
      <p>This is the sub menu</p>
      <p>Lets build it</p>
      <p>Yes we do</p>
    </div>
  </div>
</div>

推荐阅读