Question

你可以请运行代码片段并查看我的问题。我所需要的只是修复箭头才能正常工作。现在，当单击相同的元素以打开和关闭下拉列表时，一切都很好。但是，如果您尝试打开下拉列表，单击第一个元素，然后单击第二个元素，第一个下拉列表将关闭，但箭头将保持打开位置的状态。

function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }

  var classString = element.className,
    nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  } else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
  }
  element.className = classString;
}

function dropDown(el) {

  Array.from(document.querySelectorAll('.overlayOpen'))
    .filter(elem => elem !== el.nextElementSibling)
    .forEach(element => element.classList.remove('overlayOpen'));

  toggleClass(el.nextElementSibling, 'overlayOpen');
  toggleClass(el, 'listPoints');
  toggleClass(el, 'arrUp');
}

ul {
  width: 200px;
}
li {
  margin: 0;
  font-size: 20px;
  line-height: 50px;
  width: 100%;
  cursor: pointer;
  background-color: red;
  overflow: hidden;
  position: relative;
}
.overlayOpen {
  opacity: 1 !important;
  height: 50px !important;
  width: 100% !important;
}
.overlay {
  width: 100%;
  z-index: 1000;
  background-color: green;
  overflow: hidden;
  max-width: 800px;
  opacity: 0;
  height: 0;
  width: 0;
  -webkit-transition: height 0.2s, opacity 0.2s ease;
  -moz-transition: height 0.2s, opacity 0.2s ease;
  -o-transition: height 0.2s, opacity 0.2s ease;
  -ms-transition: height 0.2s, opacity 0.2s ease;
  transition: height 0.2s, opacity 0.2s ease;
}
.arrUp::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 18px;
  margin-top: 0;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #A0A09F;
  border-right: 0.3em solid #A0A09F;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.listPoints::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 7px;
  margin-top: 0;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #A0A09F;
  border-right: 0.3em solid #A0A09F;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

<ul>
  <li id="1" class="listPoints" onclick='dropDown(this)'>example</li>
  <li id="overlay_1" class='overlay'>Hidden stuff</li>
</ul>

<ul>
  <li id="2" class="listPoints" onclick='dropDown(this)'>example</li>
  <li id="overlay_2" class='overlay'>Hidden stuff</li>
</ul>

由于

Answer 1

我不是你风格的忠实粉丝，但如果你必须这样做，那么你需要扭转＆＃34;打开＆＃34;的所有效果。打开另一个时的下拉列表：

Array.from(document.querySelectorAll('.overlayOpen'))
    .filter(elem => elem !== el.nextElementSibling)
    .forEach(element => {element.classList.remove('overlayOpen'); 
            element.previousElementSibling.classList.remove('arrUp');
            element.previousElementSibling.classList.add('listPoints');
    })

Answer 2

通过删除或提交此代码行修复

.forEach(element => element.classList.remove('overlayOpen'));

请参阅下面的更新代码

＆＃13;

function toggleClass(element, className) {
  if (!element || !className) {
    return;
  }

  var classString = element.className,
    nameIndex = classString.indexOf(className);
  if (nameIndex == -1) {
    classString += ' ' + className;
  } else {
    classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
  }
  element.className = classString;
}

function dropDown(el) {

  Array.from(document.querySelectorAll('.overlayOpen'))
    .filter(elem => elem !== el.nextElementSibling)
   // .forEach(element => element.classList.remove('overlayOpen'));

  toggleClass(el.nextElementSibling, 'overlayOpen');
  toggleClass(el, 'listPoints');
  toggleClass(el, 'arrUp');
}

＆＃13;

ul {
  width: 200px;
}
li {
  margin: 0;
  font-size: 20px;
  line-height: 50px;
  width: 100%;
  cursor: pointer;
  background-color: red;
  overflow: hidden;
  position: relative;
}
.overlayOpen {
  opacity: 1 !important;
  height: 50px !important;
  width: 100% !important;
}
.overlay {
  width: 100%;
  z-index: 1000;
  background-color: green;
  overflow: hidden;
  max-width: 800px;
  opacity: 0;
  height: 0;
  width: 0;
  -webkit-transition: height 0.2s, opacity 0.2s ease;
  -moz-transition: height 0.2s, opacity 0.2s ease;
  -o-transition: height 0.2s, opacity 0.2s ease;
  -ms-transition: height 0.2s, opacity 0.2s ease;
  transition: height 0.2s, opacity 0.2s ease;
}
.arrUp::before {
  content: '';
  position: absolute;
  right: 20px;
  top: 18px;
  margin-top: 0;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #A0A09F;
  border-right: 0.3em solid #A0A09F;
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.listPoints::after {
  content: '';
  position: absolute;
  right: 20px;
  top: 7px;
  margin-top: 0;
  width: 1em;
  height: 1em;
  border-top: 0.3em solid #A0A09F;
  border-right: 0.3em solid #A0A09F;
  -moz-transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

＆＃13;

<ul>
  <li id="1" class="listPoints" onclick='dropDown(this)'>example</li>
  <li id="overlay_1" class='overlay'>Hidden stuff</li>
</ul>

<ul>
  <li id="2" class="listPoints" onclick='dropDown(this)'>example</li>
  <li id="overlay_2" class='overlay'>Hidden stuff</li>
</ul>

＆＃13;

需要JavaScript帮助。下拉菜单问题

2 个答案: