在JavaScript中单击另一个手风琴时，删除活动的手风琴

Question

我需要帮助来解决侧边栏的JavaScript代码。我看到很多参考资料和帮助通常可以通过jQuery完成。我知道jQuery很强大，但由于我是初学者，所以我更喜欢使用常规JavaScript。

如果您正在阅读本文，请不要将其标记为(x y)或duplicate，因为我从事JavaScript研究已有一段时间了，希望这篇文章对我自己和其他人有用想使用常规JavaScript。

继续前进，我实际上是从w3Schools学习创建一个简单的手风琴，您可以在here上找到它。

同时，我已经成功创建了自定义边栏。但是问题是我希望我的活动手风琴在单击其他手风琴时关闭。

游乐场：

devote

const sideBar = document.getElementsByClassName('pisti-sidebar');

for (let i = 0; i < sideBar.length; i++) {
  sideBar[i].addEventListener('click', function() {
    const sideBarTitle = this.nextElementSibling;

    sideBarTitle.style.display == 'none';

    if (sideBarTitle.style.display === 'block') {
      sideBarTitle.style.display = 'none';
    } else {
      sideBarTitle.style.display = 'block';
      document.querySelectorAll('.pisti-sidebar')[i].classList.remove('onload-active');
      document.querySelectorAll('.pisti-sidebar-title')[i].classList.remove('onload-active');

    }
  });
}

body {
  background: #000000 !important;
  width: 100vw;
  height: 100vh;
  padding: 20px;
}


/* pisti-sidebar goes here */

.pisti-sidebar {
  background: none !important;
  border: none;
  border-left: 2px solid #888888;
  color: #888888;
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  padding: 10px 30px 10px 20px;
  text-align: left;
  transition: 0.3s all ease;
  width: 100%;
}

.pisti-sidebar:first-child {
  padding-top: 0;
}

.pisti-sidebar-title {
  border-left: 2px solid #888888;
  display: none;
  overflow: hidden;
  transition: 0.3s all ease;
}

.pisti-sidebar:hover {
  border-color: #FFFFFF;
  color: #f7cc1b;
  transition: 0.3s all ease;
}

.pisti-sidebar-active,
.pisti-sidebar:active,
.pisti-sidebar:focus {
  border-color: #FFFFFF;
  color: #f7cc1b !important;
  outline: none;
}

.pisti-sidebar:focus+.pisti-sidebar-title {
  border-color: #FFFFFF;
  transition: 0.3s all ease;
}

.pisti-sidebar-content {
  color: #888888 !important;
  display: block;
  font-size: 16px;
  padding: 0px 30px 10px 30px;
  transition: 0.3s all ease;
}

.pisti-sidebar-content:hover {
  color: #FFFFFF !important;
  text-decoration: none;
  transition: 0.3s all ease;
}

.pisti-sidebar-content:first-child {
  padding-top: 10px;
}

.pisti-sidebar-content:last-child {
  padding-bottom: 10px;
}


/* pisti-sidebar active */

.onload-active {
  color: #f7cc1b;
  border-color: #FFFFFF;
  display: block;
}

.onload-unactive {
  color: #FFFFFF;
  border-color: #888888;
}

.pisti-sidebar:focus+.pisti-sidebar-title {
  border-color: #FFFFFF;
  transition: 0.3s all ease;
}

.pisti-sidebar-title-active {
  border-color: #FFFFFF;
}

.pisti-sidebar-title-active,
.pisti-sidebar-content-active {
  color: #f7cc1b !important;
}

.pisti-sidebar-content-active::before {
  background-color: #FFFFFF;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  content: '';
  height: 10px;
  left: 16px;
  margin-top: 8px;
  position: absolute;
  width: 6px;
}

为进一步解释，我实际上添加了：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <button class="pisti-sidebar onload-active" data-pisti-sidebar="pisti-sidebar-1">Appareal</button>
      <!-- pisti-sidebar-active -->
      <div class="pisti-sidebar-title onload-active">
        <!-- pisti-sidebar-title-active -->
        <a href="#" class="pisti-sidebar-content">Custom shirt</a>
        <a href="#" class="pisti-sidebar-content">Event shirt</a>
        <a href="#" class="pisti-sidebar-content">Corporate shirt</a>
        <!-- pisti-sidebar-content-active -->
      </div>

      <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-2">Digital Printing</button>
      <!-- pisti-sidebar-active -->
      <div class="pisti-sidebar-title">
        <!-- pisti-sidebar-title-active -->
        <a href="#" class="pisti-sidebar-content">Poster</a>
        <a href="#" class="pisti-sidebar-content">Banner</a>
        <a href="#" class="pisti-sidebar-content">Bunting</a>
        <!-- pisti-sidebar-content-active -->
      </div>

      <button class="pisti-sidebar" data-pisti-sidebar="pisti-sidebar-3">Offset Printing</button>
      <!-- pisti-sidebar-active -->
      <div class="pisti-sidebar-title">
        <!-- pisti-sidebar-title-active -->
        <a href="#" class="pisti-sidebar-content">Name card</a>
        <a href="#" class="pisti-sidebar-content">Flyer</a>
        <a href="#" class="pisti-sidebar-content">Booklet</a>
        <!-- pisti-sidebar-content-active -->
      </div>
    </div>
  </div>
</div>

删除第一手风琴上的类，以便将其关闭。但是我不知道如何在单击第三或第一手风琴时关闭第二手风琴。

Answer 1

更改了CSS和JS，以排除在save()循环中切换的列表。而是只需在按钮上切换for类，然后使用相邻的选择器.active来显示其列表。

.pisti-sidebar.active + .pisti-sidebar-title

const sideBars = document.getElementsByClassName('pisti-sidebar');

for (let sideBar of sideBars) {
  sideBar.onclick = e => {
    var thisEl = e.target;
    if (thisEl.classList.contains('active')) {
      thisEl.classList.remove('active');
    } else {
      thisEl.classList.add('active');
      for (activeSideBar of sideBars) {
        if (activeSideBar != thisEl) {
          activeSideBar.classList.remove('active');
        }
      }
    }
  }
}

body {
  background: #000000 !important;
  width: 100vw;
  height: 100vh;
  padding: 20px;
}

.pisti-sidebar {
  background: none !important;
  border: none;
  border-left: 2px solid #888888;
  color: #888888;
  cursor: pointer;
  font-size: 20px;
  font-weight: 400;
  padding: 10px 30px 10px 20px;
  text-align: left;
  transition: 0.3s all ease;
  width: 100%;
}

.pisti-sidebar:first-child {
  padding-top: 0;
}

.pisti-sidebar-title {
  border-left: 2px solid #888888;
  display: none;
  overflow: hidden;
  transition: 0.3s all ease;
}

.pisti-sidebar:active,
.pisti-sidebar:focus {
  outline: none;
}

.pisti-sidebar.active+.pisti-sidebar-title {
  display: block;
}

.pisti-sidebar-content {
  color: #888888 !important;
  display: block;
  font-size: 16px;
  padding: 0px 30px 10px 30px;
  transition: 0.3s all ease;
}

.pisti-sidebar-content:hover {
  color: #FFFFFF !important;
  text-decoration: none;
  transition: 0.3s all ease;
}

.pisti-sidebar-content:first-child {
  padding-top: 10px;
}

.pisti-sidebar-content:last-child {
  padding-bottom: 10px;
}

.active {
  color: #f7cc1b;
  border-color: #FFFFFF;
  display: block;
}

.onload-unactive {
  color: #FFFFFF;
  border-color: #888888;
}

.pisti-sidebar:focus+.pisti-sidebar-title {
  border-color: #FFFFFF;
  transition: 0.3s all ease;
}

.pisti-sidebar-title-active {
  border-color: #FFFFFF;
}

.pisti-sidebar-title-active,
.pisti-sidebar-content-active {
  color: #f7cc1b !important;
}

.pisti-sidebar-content-active::before {
  background-color: #FFFFFF;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  content: '';
  height: 10px;
  left: 16px;
  margin-top: 8px;
  position: absolute;
  width: 6px;
}