Javascript 输入要在单击时显示的收音机选项

我正在创建一组单选按钮，稍后将用于捕获值，以便创建订阅/模式签出。目前，我已显示收音机选项。当用户单击箭头图像时，单选按钮会下拉并出现，我正在尝试将其设置为。我已经写了一些代码，似乎它会工作。任何提示都非常感谢

 <main class="subscription__container">
      <section id="preferences" class="subscription__container--preferences">
        <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"
              checked
            />
            <label for="capsule"></label>
            <h4 class="options__container--title">Capsule</h4>
            <p class="options__container--description">
              Compatible with Nespresso systems and similar brewers.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="filter"
              type="radio"
              data-preference="Filter"
              value="Filter"
              name="preferences"
            />
            <label for="filter"></label>
            <h4 class="options__container--title">Filter</h4>
            <p class="options__container--description">
              For pour over or drip methods like Aeropress, Chemex, and V60.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="espresso"
              type="radio"
              data-preference="Espresso"
              value="Espresso"
              name="preferences"
            />
            <label for="espresso"></label>
            <h4 class="options__container--title">Espresso</h4>
            <p class="options__container--description">
              Dense and finely ground beans for an intense, flavorful
              experience.
            </p>
          </div>
        </div>
      </section>
      <section id="bean" class="subscription__container--beans">
        <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"
              checked
            />
            <label for="single"></label>
            <h4 class="options__container--title">Single Origin</h4>
            <p class="options__container--description">
              Distinct, high quality coffee from a specific family-owned farm.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="decaf"
              type="radio"
              data-bean="Decaf"
              value="Decaf"
              name="beanType"
            />
            <label for="filter"></label>
            <h4 class="options__container--title">Decaf</h4>
            <p class="options__container--description">
              Just like regular coffee, except the caffeine has been removed.
            </p>
          </div>
          <div class="options__container--option">
            <input
              id="blended"
              type="radio"
              data-preference="Blended"
              value="Blended"
              name="beanType"
            />
            <label for="blended"></label>
            <h4 class="options__container--title">Blended</h4>
            <p class="options__container--description">
              Combination of two or three dark roasted beans of organic coffees.
            </p>
          </div>
        </div>
      </section>
    </main>

你可以这样做

#我的表格h4{
保证金：0；
}
#我的表格p{
保证金：0；
字体大小：.8em；
边缘底部：.3em；
}
#我的表格摘要{
字号：1.4em；
字体大小：粗体；
边缘：.4em；
}
#我的表单输入[type=“radio”]{
显示：无；
}
#我的表格h4：之后{
内容：'\00A0'；
显示：内联块；
边框：1px纯色浅蓝色；
字号：1em；
宽度：.6em；
高度：.6em；
溢出：可见；
保证金：3em.3em 0.5em；
线高：.6em；
边界半径：2px；
}
#我的表单输入[type=“radio”]：选中+h4:之后{
内容:'✓';
颜色：绿色；
}

你怎么喝咖啡？
胶囊
与Nespresso系统和类似啤酒厂兼容

滤器
适用于Aeropress、Chemex和V60等倾注或滴注方法

意大利浓咖啡
浓密细碎的咖啡豆，给人一种强烈、美味的体验

什么类型的咖啡？
单一来源
来自特定家庭农场的独特优质咖啡

脱咖啡因咖啡
就像普通咖啡一样，只是咖啡因已经被去除了

混合
两种或三种深色烘焙的有机咖啡豆的混合物

差不多有300行代码！你应该把它减少到3个单选按钮，然后按照苏的建议去做：会的，道歉对我来说是个复杂的方法，也许你也应该使用标签。我也不明白单选按钮组是如何关闭的，它们是关闭的，因为我将它们设置为显示无。不，当显示一个组时，它们是如何再次关闭的？我喜欢详细信息标签，非常有条理。谢谢你抽出时间来帮助我

.options__container--option {
  display: none;
}

.options__container--option.active {
  display: block;
}

arrowButton.forEach((el) =>
  el.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(
      ".options__container--option"
    );
    subMenu.classList.toggle("active");
  })
);