单击时显示的输入单选选项

Question

我正在创建一组单选按钮，稍后将用于捕获这些值以创建订阅/模式结帐。目前我有单选选项显示。当用户单击箭头图像时，我试图将其设置为单选按钮下拉并出现。我写了一些代码，看起来它会起作用。非常感谢任何提示。

 <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>

.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");
  })
);

Answer 1

你可以做到...

#my-form h4  {
  margin     : 0;
}
#my-form p  {
  margin        : 0;
  font-size     : .8em;
  margin-bottom : .3em;
}
#my-form summary {
  font-size   : 1.4em;
  font-weight : bold;
  margin      : .4em;
}
#my-form input[type="radio"]  {
  display     : none;
  }
#my-form  h4:after {
  content       : '[=10=]A0'; 
  display       : inline-block; 
  border        : 1px solid lightblue; 
  font-size     : 1em;
  width         : .6em; 
  height        : .6em;
  overflow      : visible;
  margin        : .3em .3em 0 .5em;
  line-height   : .6em;
  border-radius : 2px;
  }
#my-form input[type="radio"]:checked + h4:after {
  content : '✓';
  color : green;
  }

<form id="my-form">
    <details>
      <summary> How do you drink your coffee?</summary>
      <label>
        <input name="preferences" type="radio" value="Capsule" >
        <h4>Capsule</h4>
        <p>Compatible with Nespresso systems and similar brewers. </p>
      </label>
      <label>
        <input name="preferences" type="radio" value="Filter" >
        <h4>Filter</h4>
        <p>For pour over or drip methods like Aeropress, Chemex, and V60. </p>
      </label>
      <label>
        <input name="preferences" type="radio" value="Espresso" >
        <h4>Espresso</h4>
        <p>Dense and finely ground beans for an intense, flavorful experience. </p>
      </label>
    </details>

    <details>
      <summary>What type of coffee?</summary>
      <label>
        <input name="beanType" type="radio" value="Single Origin" >
        <h4>Single Origin</h4>
        <p>Distinct, high quality coffee from a specific family-owned farm</p>
      </label>
      <label>
        <input name="beanType" type="radio" value="Decaf" >
        <h4>Decaf</h4>
        <p>Just like regular coffee, except the caffeine has been removed.</p>
      </label>
      <label>
        <input name="beanType" type="radio" value="Blended">
        <h4>Blended</h4>
        <p>Combination of two or three dark roasted beans of organic coffees.</p>
      </label>
    </details>    
 </form>

单击时显示的输入单选选项

Input radio options to be displayed on click

html

javascript

radio-button