如何使用收音机制作更多文本以下拉？答案

【问题标题】：How to make more text with radio to drop down?如何使用收音机制作更多文本以下拉？
【发布时间】：2023-03-06 06:04:02
【问题描述】：

我的问题是如何在您单击其他代码后使此代码下拉：

   <table><tr><td>
    <h3>What power does you character have?</h3>
    <label><input type="radio" name="prefer" value="1"  /> Speed</label><br/>
    <label><input type="radio" name="prefer" value="2"  /> Strength</label><br/>
    <label><input type="radio" name="prefer" value="3"  /> Invisablity</label><br/>
    <label><input type="radio" name="prefer" value="4"  /> Flight</label><br/>
</td></tr></table>

这是我要下拉的代码（如果你点击了速度）

   <table><tr><td>
    <h3>Does he can slow down time?</h3>
    <label><input type="radio" name="prefer" value="1"  /> Speed</label><br/>
    <label><input type="radio" name="prefer" value="2"  /> Strength</label><br/>
    <label><input type="radio" name="prefer" value="3"  /> Invisablity</label><br/>
    <label><input type="radio" name="prefer" value="4"  /> Flight</label><br/>
</td></tr></table>

谁能帮帮我？

【问题讨论】：

嗯...首先你应该停止使用表格，因为这些数据根本不属于表格。这些是列表，应该放在<ul> 中。至于您要问什么，您需要有一些 javascript 来根据用户选择的内容显示和隐藏项目。

标签： html input radio-button html-table

【解决方案1】：

您可以使用手风琴完成此操作。

$( function() {
    $( "#accordion" ).accordion(   {collapsible: true, active: false });
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div id="accordion">
  <h3>Does he can slow down time?</h3>
  <div>
    <label><input type="radio" name="prefer" value="1"  /> Speed</label><br/>
    <label><input type="radio" name="prefer" value="2"  /> Strength</label><br/>
    <label><input type="radio" name="prefer" value="3"  /> Invisablity</label><br/>
    <label><input type="radio" name="prefer" value="4"  /> Flight</label><br/>
  </div>    
</div>

【讨论】：