这是因为 arrows 包含所有 .question__container--img 元素的列表，而不是单个元素。 您需要从 el 而不是 document 获取 arrow ：

//
const questionBox = document.getElementsByClassName("question__container");
[...questionBox].forEach((el) =>
{
  const arrow = el.querySelector(".question__container--img");
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.parentElement.querySelector(
      ".options__container"
    );
    subMenu.classList.toggle("open");
    arrow.classList.toggle("rotate");
  })
});
//

.question__container--img.rotate {
  transform: rotate(180deg);
}

<main class="subscription__container">
        <section
          id="preferences"
          class="subscription__container--preferences box"
        >
          <div class="question__container">
            <h3 class="question__container--title">
              How do you drink your coffee?
            </h3>
            <img
              class="question__container--img"
              src="../assets/plan/desktop/icon-arrow.svg"
              alt="arrow"
            />
          </div>
          <div class="options__container">
            <div class="options__container--option">
              <input
                id="capsule"
                type="radio"
                data-preference="Capsule"
                value="Capsule"
                name="preferences"
              />
              <label class="test__trail" for="capsule">
                <h4 class="options__container--title">Capsule</h4>
                <p class="options__container--description">
                  Compatible with Nespresso systems and similar brewers.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="filter"
                type="radio"
                data-preference="Filter"
                value="Filter"
                name="preferences"
              />
              <label class="test__trail" for="filter">
                <h4 class="options__container--title">Filter</h4>
                <p class="options__container--description">
                  For pour over or drip methods like Aeropress, Chemex, and V60.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="espresso"
                type="radio"
                data-preference="Espresso"
                value="Espresso"
                name="preferences"
              />
              <label class="test__trail" for="espresso">
                <h4 class="options__container--title">Espresso</h4>
                <p class="options__container--description">
                  Dense and finely ground beans for an intense, flavorful
                  experience.
                </p>
              </label>
            </div>
          </div>
        </section>
        <section id="bean" class="subscription__container--beans box">
          <div class="question__container">
            <h3 class="question__container--title">What type of coffee?</h3>
            <img
              class="question__container--img"
              src="../assets/plan/desktop/icon-arrow.svg"
              alt="arrow"
            />
          </div>
          <div class="options__container">
            <div class="options__container--option">
              <input
                id="single"
                type="radio"
                data-bean="Single"
                value="Single"
                name="beanType"
              />
              <label class="test__trail" for="single">
                <h4 class="options__container--title">Single Origin</h4>
                <p class="options__container--description">
                  Distinct, high quality coffee from a specific family-owned
                  farm.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="decaf"
                type="radio"
                data-bean="Decaf"
                value="Decaf"
                name="beanType"
              />
              <label class="test__trail" for="decaf">
                <h4 class="options__container--title">Decaf</h4>
                <p class="options__container--description">
                  Just like regular coffee, except the caffeine has been
                  removed.
                </p>
              </label>
            </div>
            <div class="options__container--option">
              <input
                id="blended"
                type="radio"
                data-preference="Blended"
                value="Blended"
                name="beanType"
              />
              <label class="test__trail" for="blended">
                <h4 class="options__container--title">Blended</h4>
                <p class="options__container--description">
                  Combination of two or three dark roasted beans of organic
                  coffees.
                </p>
              </label>
            </div>
          </div>
        </section>

除了切换旋转之外，您还可以使用 jQuery 更改其变换：

$("whatever").css("transform", "rotate(0deg)")

或者使用原始 Javascript：

whatever.style.transform = "rotate(0deg)"

然后在打开时将其改回来。 希望这对您有所帮助！

您可以使用 if/else 将 arrows.classList.toggle("rotate"); 更改为 arrows.style.transform = "rotate(180/0)"; 。

您还可以将 display: 添加到您的 subMenu css，然后通过 if/else 再次使用 subMenu.style.display = "none/block"; 。