不使用重复功能创建手风琴

Question

目前，我正在为一些手风琴编写代码，使用一些简单的普通JS (严格来说不是jQuery，必须是香草的)，感觉我的代码非常低效。

现在就在这里：

// Variables
    
    let down = document.getElementById("chevron-down-1");
    let down2 = document.getElementById("chevron-down-2");
    let up = document.getElementById("chevron-up-1");
    let up2 = document.getElementById("chevron-up-2");
    let drop = document.getElementById("dropdown-1");
    let drop2 = document.getElementById("dropdown-2");
    
    // Functions
    
    let open = function() {
      down.style.display = "none";
      up.style.display = "block";
      drop.style.display = "block";
    };
    
    let close = function() {
      down.style.display = "block";
      up.style.display = "none";
      drop.style.display = "none";
    };
    
    let open2 = function() {
      down2.style.display = "none";
      up2.style.display = "block";
      drop2.style.display = "block";
    };
    
    let close2 = function() {
      down2.style.display = "block";
      up2.style.display = "none";
      drop2.style.display = "none";
    };
    
    // Event Listeners
    
    down.addEventListener('click', open);
    down2.addEventListener('click', open2);
    
    up.addEventListener('click', close);
    up2.addEventListener('click', close2);

    .accordion-container {
      height: 100vh;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-direction: column;
      background-color: #f9f9f9;
    }
    
    .accordion {
      height: auto;
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background-color: #999;
      box-shadow: 5px 10px 5px #888888;
    }
    
    .accordion-1 {
      height: 30%;
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    
    #chevron-down-1 {
      cursor: pointer;
    }
    
    #chevron-up-1 {
      cursor: pointer;
      display: none;
    }
    
    #dropdown-1 {
      width: 80%;
      display: none;
    }
    
    .accordion-2 {
      height: 30%;
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
    
    #chevron-down-2 {
      cursor: pointer;
    }
    
    #chevron-up-2 {
      cursor: pointer;
      display: none;
    }
    
    #dropdown-2 {
      width: 80%;
      display: none;
    }

      <div class="accordion-container">
        <div class="accordion">
          <div class="accordion-1">
            <h2>Click here</h2>
            <i id="chevron-down-1" class="fas fa-chevron-down"></i>
            <i id="chevron-up-1" class="fas fa-chevron-up"></i>
          </div>
          <p id="dropdown-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
        <div class="accordion">
          <div class="accordion-2">
            <h2>Click here</h2>
            <i id="chevron-down-2" class="fas fa-chevron-down"></i>
            <i id="chevron-up-2" class="fas fa-chevron-up"></i>
          </div>
          <p id="dropdown-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>

似乎有一种编写JavaScript的方法，所以我不必为每个新手风琴编写新函数，也不必通过其ID调用每个元素，或者添加相应的事件侦听器--但我不知道如何最好地处理它。

您将如何重新构造这段代码以减少重复？

Answer 1

代码可以重写，这样您就不必编写新的函数了。相关的functions、ids和classes都有，但它们的实际能力没有得到利用。重写时可以注意以下指针：

• 手风琴的通用功能可以通过类来实现。
• 手风琴常用的CSS可以通过类来实现。
• 使用different ids可以有n个手风琴来唯一地识别每一个手风琴，然后是the inside html structure can be identical。
• 在编写函数时，类、id等也可以作为参数传递给泛型函数。

考虑到这些因素，代码可以重写为：

let open = function(accordion) {
  accordion.getElementsByClassName("fa-chevron-down")[0].style.display = "none";
  accordion.getElementsByClassName("fa-chevron-up")[0].style.display = "block";
  accordion.getElementsByClassName("dropdown")[0].style.display = "block";
};

let close = function(accordion) {
  accordion.getElementsByClassName("fa-chevron-down")[0].style.display = "block";
  accordion.getElementsByClassName("fa-chevron-up")[0].style.display = "none";
  accordion.getElementsByClassName("dropdown")[0].style.display = "none";
};


document.getElementsByClassName("accordion-container")[0].addEventListener('click', function(e) {
  if (e.target.classList.contains("fa-chevron-down")) {
    open(e.target.parentNode.parentNode)
  }
  if (e.target.classList.contains("fa-chevron-up")) {
    close(e.target.parentNode.parentNode)
  }
})

.accordion-container {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #f9f9f9;
}

.accordion-wrap {
  height: auto;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #999;
  box-shadow: 5px 10px 5px #888888;
}

.accordion {
  height: 30%;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.fa-chevron-down {
  cursor: pointer;
}

.fa-chevron-up {
  cursor: pointer;
  display: none;
}

.dropdown {
  width: 80%;
  display: none;
}

<div class="accordion-container">
  <div class="accordion-wrap">
    <div class="accordion">
      <h2>Click here</h2>
      <i class="fas fa-chevron-down">></i>
      <i class="fas fa-chevron-up">^</i>
    </div>
    <p class="dropdown">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..</p>
  </div>
  <div class="accordion-wrap">
    <div class="accordion">
      <h2>Click here</h2>
      <i class="fas fa-chevron-down">></i>
      <i class="fas fa-chevron-up">^</i>
    </div>
    <p class="dropdown">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

在这里，您可以添加手风琴的n数。将使用相同的open和close函数。

希望能帮上忙。回复任何疑问/澄清。

Answer 2

我喜欢把我所有的样式都放在我的css中(除非你需要像高度这样的动态计算，但这里不是这样的)。通过这种方式，您总是知道在哪里寻找东西，css显然是用于样式设计的。

您真正需要做的就是点击手风琴时切换它的状态，状态定义它的显示方式。这可能就像在手风琴包装上切换一个类一样简单。就像这样：

document.querySelectorAll('.accordion header').forEach(trigger => {
  trigger.addEventListener('click', e => {
    e.currentTarget.parentNode.classList.toggle('open');
  });
});

.accordion header {
  background: gray;
  cursor: pointer;
}

.fa-chevron-down {
  display: none;
}

.accordion-content {
  display: none;
}

.accordion.open .accordion-content {
  display: block;
}

.accordion.open .fa-chevron-up {
  display: none;
}
.accordion.open .fa-chevron-down {
  display: inline;
}

 <div class="accordion-container">
        <article class="accordion">
          <header>
            <h2>Click here</h2>
            <i class="fas fa-chevron-down">+</i>
            <i class="fas fa-chevron-up">-</i>
          </header>
          <p class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
        <article class="accordion">
          <header>
            <h2>Click here</h2>
            <i class="fas fa-chevron-down">+</i>
            <i class="fas fa-chevron-up">-</i>
          </header>
          <p class="accordion-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </article>
      </div>

(请注意，为了清晰起见，我将css简化为基本部分)

现在，只要您保持相同的结构，就可以添加任意数量的.accordion元素，而不必更新javascript。也不需要身份证。