Как заставить работать единую функцию для нескольких выпадающих списков с одним и тем же классом?

Question

Когда нажата одна выпадающая кнопка, show class применяется ко всему содержимому раскрывающегося списка, несмотря на то, что он применяется только к дочернему раскрывающемуся содержимому.

Использование другого имени класса для другого раскрывающегося списка, кажется, работает, но в этом случае кодстановится огромным.

//Working JS (But using multiple classnames) 
const homeBtn = document.querySelector(".home-btn");
const aboutBtn = document.querySelector(".about-btn");
const homeContent = document.querySelectorAll(".home-content");
const aboutContent = document.querySelectorAll(".about-content");
let showDropdown = false;
homeBtn.addEventListener("click", toggleHome);
aboutBtn.addEventListener("click", toggleAbout);

function toggleHome() {
    if (!showDropdown) {
        homeContent.forEach(item => item.classList.add("show"));
        showDropdown = true;
    } else {
        homeContent.forEach(item => item.classList.remove("show"));
        showDropdown = false;
    }
}

function toggleAbout() {
    if (!showDropdown) {
        aboutContent.forEach(item => item.classList.add("show"));
        showDropdown = true;
    } else {
        aboutContent.forEach(item => item.classList.remove("show"));
        showDropdown = false;
    }
}

.sideitem {
  background: orange;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #fff;
}
.dropdown-btn {
  padding: 5px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
}
.dropdown-content.show {
  display: block;
}


.dropdown-content a {
  display: block;
  color: #fff;
  padding: 5px;
  border-bottom: 1px solid #fff;
  margin-left: 20px;
}

.dropdown-content a:hover {
  background: #fa0;
  color: #00f;
}

<ul class="sidelist">
    <li class="sideitem">
      <div class="dropdown-btn home-btn"> Home<i class="fas fa-caret-down"></i></div>
          <div class="dropdown-content home-content">
              <a href="#slider">Slider</a>
              <a href="#testimonal">Testimonal</a>
          </div>
    </li>
    <li class="sideitem">
        <div class="dropdown-btn about-btn"> About<i class="fas fa-caret- 
        down"></i></div>
            <div class="dropdown-content about-content">
                <a href="#slider">About Us</a>
                <a href="#testimonal">Our Team</a>
        </div>
    </li>
</ul>

Есть ли простой способ решить эту проблему, несмотря на использование большого кода?

Answer 1

// Get all drop-down buttons
const dropDownButtons = document.querySelectorAll(".dropdown-btn");
// Get all drop down content elements.
const dropDownContent = document.querySelectorAll(".dropdown-content");


function handleClick(event) {
  const main = event.target; // Use the event.target, the clicked element
  const className = "show"; // Spcecify the class name one time
  let myContent = null; // The drop down contents of the clicked item, if found
  dropDownContent.forEach( elem => {
    // Kludge: using parentNode since the clicked element is in it's own div.
    // It would probably be better if the querySelector above selected
    // the li-element, and then remove paretNode from the next statement.
    if ( main.parentNode.contains(elem)) {
      myContent = elem;
    } else {
      // Remove the class from every content except the clicked one.
      elem.classList.remove(className);
    }
  });
  // If the clicked have content, troggle if it is shown or not.
  if (myContent) myContent.classList.toggle(className);
}

dropDownButtons.forEach( elem => elem.addEventListener("click",  handleClick));

.sideitem {
  background: orange;
  padding: 10px 0 0 10px;
  border-bottom: 1px solid #fff;
}
.dropdown-btn {
  padding: 5px;
  cursor: pointer;
}
.dropdown-content {
  display: none;
}
.dropdown-content.show {
  display: block;
}


.dropdown-content a {
  display: block;
  color: #fff;
  padding: 5px;
  border-bottom: 1px solid #fff;
  margin-left: 20px;
}

.dropdown-content a:hover {
  background: #fa0;
  color: #00f;
}

<ul class="sidelist">
    <li class="sideitem">
      <div class="dropdown-btn home-btn"> Home<i class="fas fa-caret-down"></i></div>
          <div class="dropdown-content home-content">
              <a href="#slider">Slider</a>
              <a href="#testimonal">Testimonal</a>
          </div>
    </li>
    <li class="sideitem">
        <div class="dropdown-btn about-btn"> About<i class="fas fa-caret- 
        down"></i></div>
            <div class="dropdown-content about-content">
                <a href="#slider">About Us</a>
                <a href="#testimonal">Our Team</a>
        </div>
    </li>
</ul>