选择下一个元素时自动从上一个元素中删除 class 名称

Question

如何从上一个常见问题-div中自动删除活动的class我点击了一次我点击了另一个常见问题-div。切换 class 列表只会在单击时删除活动的 class 名称。我试过使用 .contains, !e.target 但似乎没有任何效果。

[<div class="faq">
   <h3 class="faq-question">How many team members can I invite?</h3>
     <p class="faq-answer">
       You can invite up to 2 additional users on the
       <a href="#!" class="link-free">Free</a> plan. There is no limit on
       team members for the
              <a href="#!" class="link-premium">Premium </a>plan.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">What is the maximum file upload size?</h3>
            <p class="faq-answer">
              No more than 2GB. All files in your account must fit your allotted
              storage space.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">How do I reset my password?</h3>
            <p class="faq-answer">
              Click “Forgot password” from the login page or “Change password”
              from your profile page. A reset link will be emailed to you.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">Can I cancel my subscription?</h3>
            <p class="faq-answer">
              Yes! Send us a message and we’ll process your request no questions
              asked.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>][1]

const btns = document.querySelectorAll('.faq-toggle');
const questions = document.querySelectorAll('.faq-question');

const callEvent = (els, className) => {
  els.forEach((el) => {
    el.addEventListener('click', () => {
      el.parentNode.classList.toggle(className);
    });
  });
};

callEvent(btns, 'active);
callEvent(questions, 'active);

Answer 1

您还必须从其他元素中删除 'active'。例子：

const btns = document.querySelectorAll('.faq-toggle');
const questions = document.querySelectorAll('.faq-question');

const callEvent = (els) => {
  els.forEach((el) => {
    el.addEventListener('click', (e) => {
      el.parentNode.classList.toggle('active');
      // Here you also have to remove 'active' from the other elements
      els.forEach(lm => lm !== el && lm.parentNode.classList.remove('active'));
    });
  });
};

callEvent(btns);
callEvent(questions);

.active {
  color: red;
}

<div class="faq">
   <h3 class="faq-question">How many team members can I invite?</h3>
     <p class="faq-answer">
       You can invite up to 2 additional users on the
       <a href="#!" class="link-free">Free</a> plan. There is no limit on
       team members for the
              <a href="#!" class="link-premium">Premium </a>plan.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">What is the maximum file upload size?</h3>
            <p class="faq-answer">
              No more than 2GB. All files in your account must fit your allotted
              storage space.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">How do I reset my password?</h3>
            <p class="faq-answer">
              Click “Forgot password” from the login page or “Change password”
              from your profile page. A reset link will be emailed to you.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>
          <div class="faq">
            <h3 class="faq-question">Can I cancel my subscription?</h3>
            <p class="faq-answer">
              Yes! Send us a message and we’ll process your request no questions
              asked.
            </p>
            <button class="faq-toggle">
              <img src="images/icon-arrow-down.svg" alt="an arrow icon" />
            </button>
          </div>

Answer 2

const faqs = document.querySelectorAll('.faq'); //all faq nodes list

const callEvent = (els) => {
  els.forEach((el) => {
    el.addEventListener('click', (e) => {
      faqs.forEach(f => f.classList.remove("active")); //removing 'active' class from all faq nodes
      el.parentNode.classList.toggle('active');
    });
  });
};

选择下一个元素时自动从上一个元素中删除 class 名称

remove class name automatically from previous element on selecting the next element

javascript

events

toggle