如何切换菜单中的子菜单项

Question

我无法使用以下代码来正常工作。 我有一个简单的菜单。 其中一个项目包含子菜单。 点击该项目后，我希望它能够折叠和解开。 由于某种原因，它只会解开第一个子项而不是其他子项。 我找不到类似的帖子，这就是为什么我在这里提出我的问题。

欢迎所有帮助

＆＃13;

＆＃13;

function toggleSubmenu(e) {
  e.classList.toggle("active");
  var panel = e.nextElementSibling;
  if (panel.style.maxHeight) {
    panel.style.maxHeight = null;
  } else {
    panel.style.maxHeight = panel.scrollHeight + "px";
  }
}

＆＃13;

.c-menu {
  position: absolute;
  width: 200px;
  margin: 0px;
  padding: 0;
  background-color: #fff;
  border-left: 1px solid #CBCBCB;
  border-right: 1px solid #CBCBCB;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.c-menu ul {
  list-style-type: none;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  height: 35px;
  border: none;
  border-bottom: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.c-menu ul.active,
.c-menu ul:hover {
  background-color: #EAEAEA;
}

.c-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-submenu li {
  border-bottom: 1px solid #CBCBCB;
  height: 35px;
  font-size: 14px;
  padding: 10px 0 0 39px;
  cursor: pointer;
}

.c-submenu li:hover {
  background-color: #EAEAEA;
}

.c-panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='c-menu'>
  <ul>A</ul>
  <ul>B</ul>
  <ul>C</ul>

  <ul onclick='toggleSubmenu(this)'>OPEN</ul>
  <ul class="c-submenu c-panel">
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要切换panel.style.overflow属性。

＆＃13;

＆＃13;

function toggleSubmenu(e) {
		e.classList.toggle("active");
		var panel = e.nextElementSibling;
		if (panel.style.maxHeight) {
			panel.style.maxHeight = null;
      panel.style.overflow = "hidden";
		} else {
			panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.overflow = "visible";
		}
	}

＆＃13;

.c-menu {
  position: absolute;
  width: 200px;
  margin: 0px;
  padding: 0;
  background-color: #fff;
  border-left: 1px solid #CBCBCB;
  border-right: 1px solid #CBCBCB;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.c-menu ul {
  list-style-type: none;
  background-color: #fff;
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  height: 35px;
  border: none;
  border-bottom: 1px solid #CBCBCB;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.c-menu ul.active,
.c-menu ul:hover {
  background-color: #EAEAEA;
}

.c-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.c-submenu li {
  border-bottom: 1px solid #CBCBCB;
  height: 35px;
  font-size: 14px;
  padding: 10px 0 0 39px;
  cursor: pointer;
  background-color: white;
}

.c-submenu li:hover {
  background-color: #EAEAEA;
}

.c-panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class='c-menu'>
  <ul>A</ul>
  <ul>B</ul>
  <ul>C</ul>

  <ul onclick='toggleSubmenu(this)'>OPEN</ul>
  <ul class="c-submenu c-panel">
    <li>AA</li>
    <li>BB</li>
    <li>CC</li>
    <li>DD</li>
  </ul>
</div>

＆＃13;

＆＃13;

＆＃13;