javascript - 关闭所有打开的下拉菜单并尽可能合并代码

Question

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

我有两个文本下拉列表，它们将在页面上一个接一个地交替使用。换句话说，accordion1、accordion2、accordion1、accordion2 等等，我有 accordion1 和 accordion2 的原因是，以我有限的经验，这是我唯一能想出改变按钮颜色的方法，这样列表就可以改变颜色。合并代码会很好，但如果需要的话我可以接受额外的代码。

这是 accordion1 的代码

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 .反过来做。
• 对所有 Accordion 使用相同的 JavaScript 代码和 CSS。

编辑(滚动到 View )

我添加了代码来自动滚动窗口，以便事件选项卡可见。 它仅适用于 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>