关闭所有打开的下拉菜单，并在可能的情况下合并代码

Question

我需要做的是在选择另一个文本时关闭文本下拉列表，这样我就不会同时在页面上同时打开一堆下拉列表。

strong>

我有两个文本下拉菜单，将在页面上交替使用。换句话说，手风琴1，手风琴2，手风琴1，手风琴2等等之所以我拥有手风琴1和手风琴2的原因是，由于我的经验有限，这是我可以找出更改按钮颜色以便列表可以替换颜色的唯一方法。合并代码会很好，但是如果需要，我可以接受额外的代码。

这是手风琴1的代码

var acc = document.getElementsByClassName("accordion1");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active1");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

var acc = document.getElementsByClassName("accordion2");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    /* Toggle between adding and removing the "active" class,
    to highlight the button that controls the panel */
    this.classList.toggle("active1");

    /* Toggle between hiding and showing the active panel */
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion1 {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

.accordion2 {
  background-color: #8461E8;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}


/* Add a background color to the button if it is clicked on (add the 
      .active class with JS), and when you move the mouse over it (hover) */

.active1,
.accordion1:hover {
  background-color: #ccc;
}


/* Style the accordion panel. Note: hidden by default */

.panel1 {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.accordion1:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.accordion2:after {
  content: '\02795';
  /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active1:after {
  content: "\2796";
  /* Unicode character for "minus" sign (-) */
}

<Section><button class="accordion1"><h3>Alternators and regulators</h3> 
    </button>
  <div id="accordion1-div" class="panel1">
    <p>First group of words go here></div>
</Section>

<Section><button class="accordion2"><h3>Batteries and Inverters</h3> 
    </button>
  <div id="accordion-div" class="panel1">
    <p>Second set of words go here.</p>
  </div>
</Section>

<Section><button class="accordion1"><h3>AC and DC Panels </h3> 
    </button>
  <div id="accordian1-div" class="panel1">
    <p>Third set of words reusing "accordion1 go here"</p>
  </div>
</Section>

任何帮助或资源找出所需的代码将不胜感激。

Answer 1

问题1-“我为什么不能同时在页面上同时打开一堆下拉菜单”？

在打开另一个下拉列表之前，请先关闭所有下拉列表。您也可以创建CSS规则来显示或隐藏下拉菜单。这样，将更容易找到当前活动的下拉列表。参见下面的代码。

问题2-“如何使列表使用其他颜色”

您可以向一个元素添加多个类。只需创建颜色类并将其添加到正确的元素中即可。参见下面的代码。

注意：

• 使用CSS选择器代替JavaScript来显示/隐藏面板
• Element h3 is not allowed as child of element button。反过来也可以。
• 对所有手风琴使用相同的JavaScript代码和CSS。

编辑（scrollIntoView）

我添加了代码以自动滚动窗口，以便显示活动选项卡。 它仅适用于Chrome，Firefox和Opera。使用此polyfill iamdustan/smoothscroll可以在其他浏览器中使用它。 See compatibility here和all functions here。

// Query all accordions
var accordions = document.querySelectorAll('.accordion');

for (var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener('click', function() {
    // Get the currently active accordion
    var active = document.querySelector('.accordion.active');

    // If there is one, deactivate it
    if (active) {
      active.classList.remove('active');
    }

    // Activate the new accordion, if it's not the one you just deactivated
    if (active !== this) {
      this.classList.add('active');
      
      // Use scrollIntoView to adjust the window scroll position to show the content.
      this.scrollIntoView({
        behavior: 'smooth'
      });
    }
  });
}

.accordion .header button {
  text-align: left;
  padding: 18px;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
  color: #444;
  width: 100%;
  transition: 0.4s;
}


/* Set the color according to the modifier class */

.accordion.gray button {
  background-color: #eee;
}

.accordion.purple button {
  background-color: #8461E8;
}

.accordion.active button,
.accordion button:hover {
  background-color: #ccc;
}

.accordion .panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}


/* Show the panel if the accordion is active */

.accordion.active .panel {
  display: block;
}

.accordion button:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.accordion.active button:after {
  content: "\2796";
}

<section>
  <!-- Each accordion is wrapped by a div with the class 'accordion' -->
  <!-- 'accordion' is the component, 'gray' is the color modifier -->
  <div class="accordion gray">
    <!-- h3 can contain a button -->
    <h3 class="header">
      <button>Alternators and regulators</button>
    </h3>
    <div class="panel">
      <p>
        First group of words go here.<br/> I'm afraid I just blue myself. No… but I'd like to be asked! Michael! It's called 'taking advantage.' It's what gets you ahead in life. Now, when you do this without getting punched in the chest, you'll have
        more fun.
      </p>
    </div>
  </div>
</section>

<section>
  <!-- Use the 'purple' modifier class here -->
  <div class="accordion purple">
    <h3 class="header">
      <button>Batteries and Inverters</button>
    </h3>
    <div class="panel">
      <p>
        Second set of words go here.<br/> Steve Holt! I don't criticize you! And if you're worried about criticism, sometimes a diet is the best defense. That's why you always leave a note! Well, what do you expect, mother? I don't criticize you! And
        if you're worried about criticism, sometimes a diet is the best defense.<br/>
        <br/> Across from where? As you may or may not know, Lindsay and I have hit a bit of a rough patch. Now, when you do this without getting punched in the chest, you'll have more fun. No… but I'd like to be asked!
      </p>
    </div>
  </div>
</section>

<section>
  <div class="accordion gray">
    <h3 class="header">
      <button>AC and DC Panels 
    </button>
    </h3>
    <div class="panel">
      <p>
        Third set of words go here.<br/> That's why you always leave a note! Not tricks, Michael, illusions. As you may or may not know, Lindsay and I have hit a bit of a rough patch. It's called 'taking advantage.' It's what gets you ahead in life.<br/>
        <br/> Say goodbye to these, because it's the last time! First place chick is hot, but has an attitude, doesn't date magicians. I'm afraid I just blue myself. I'm afraid I just blue myself. I'm afraid I just blue myself.
      </p>
    </div>
  </div>
</section>