javascript - Bootstrap 管理面板单选按钮隐藏和显示

Question

这是我正在使用的管理面板的链接，以 Bootstrap 为主题 https://almsaeedstudio.com/themes/AdminLTE/index.html

我正在尝试添加一个单选按钮，用于隐藏和显示包含一些下拉列表的 div 。这是该图像

打开时显示下面的 div，关闭时它消失。

我最接近让我的梦想成为现实的是它起作用了，但是单选按钮(单选按钮中的黑圈)不起作用，两个选项都没有被选中，即使我想单击它们它也会运行功能而不是颜色。

这是我的代码

<form class="form-horizontal">
  <div class="form-group">
    <div class="col-md-6">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Open
      </label>
    </div>
    <div class="col-md-6">
      <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"> Closed
      </label>
    </div>
    <label for="openingHour" class="col-sm-2 control-label">From: </label>
    <div class="col-sm-10">
      <select class="form-control">
        <option>12:00 AM</option>
        <option>12:30 AM</option>
        <option>1:00 AM</option>
        <option>1:30 AM</option>
        <option>2:00 AM</option>
        <option>2:30 AM</option>
        <option>3:00 AM</option>
        <option>3:30 AM</option>
        <option>4:00 AM</option>
        <option>4:30 AM</option>
        <option>5:00 AM</option>
        <option>5:30 AM</option>
        <option>6:00 AM</option>
        <option>6:30 AM</option>
        <option>7:00 AM</option>
        <option>7:30 AM</option>
        <option>8:00 AM</option>
        <option>8:30 AM</option>
        <option>9:00 AM</option>
        <option>9:30 AM</option>
        <option>10:00 AM</option>
        <option>10:30 AM</option>
        <option>11:00 AM</option>
        <option>11:30 AM</option>
        <option>12:00 PM</option>
        <option>12:30 PM</option>
        <option>1:00 PM</option>
        <option>1:30 PM</option>
        <option>2:00 PM</option>
        <option>2:30 PM</option>
        <option>3:00 PM</option>
        <option>3:30 PM</option>
        <option>4:00 PM</option>
        <option>4:30 PM</option>
        <option>5:00 PM</option>
        <option>5:30 PM</option>
        <option>6:00 PM</option>
        <option>6:30 PM</option>
        <option>7:00 PM</option>
        <option>7:30 PM</option>
        <option>8:00 PM</option>
        <option>8:30 PM</option>
        <option>9:00 PM</option>
        <option>9:30 PM</option>
        <option>10:00 PM</option>
        <option>10:30 PM</option>
        <option>11:00 PM</option>
        <option>11:30 PM</option>
      </select>
    </div>
  </div>
  <div class="form-group">
    <label for="closingHour" class="col-sm-2 control-label">To: </label>
    <div class="col-sm-10">
      <select class="form-control">
        <option>12:00 AM</option>
        <option>12:30 AM</option>
        <option>1:00 AM</option>
        <option>1:30 AM</option>
        <option>2:00 AM</option>
        <option>2:30 AM</option>
        <option>3:00 AM</option>
        <option>3:30 AM</option>
        <option>4:00 AM</option>
        <option>4:30 AM</option>
        <option>5:00 AM</option>
        <option>5:30 AM</option>
        <option>6:00 AM</option>
        <option>6:30 AM</option>
        <option>7:00 AM</option>
        <option>7:30 AM</option>
        <option>8:00 AM</option>
        <option>8:30 AM</option>
        <option>9:00 AM</option>
        <option>9:30 AM</option>
        <option>10:00 AM</option>
        <option>10:30 AM</option>
        <option>11:00 AM</option>
        <option>11:30 AM</option>
        <option>12:00 PM</option>
        <option>12:30 PM</option>
        <option>1:00 PM</option>
        <option>1:30 PM</option>
        <option>2:00 PM</option>
        <option>2:30 PM</option>
        <option>3:00 PM</option>
        <option>3:30 PM</option>
        <option>4:00 PM</option>
        <option>4:30 PM</option>
        <option>5:00 PM</option>
        <option>5:30 PM</option>
        <option>6:00 PM</option>
        <option>6:30 PM</option>
        <option>7:00 PM</option>
        <option>7:30 PM</option>
        <option>8:00 PM</option>
        <option>8:30 PM</option>
        <option>9:00 PM</option>
        <option>9:30 PM</option>
        <option>10:00 PM</option>
        <option>10:30 PM</option>
        <option>11:00 PM</option>
        <option>11:30 PM</option>
      </select>
    </div>
  </div>
</form>

我删除了 js，因为我不想让任何人感到困惑。我希望这会有所帮助，并且不会造成太多麻烦。

Answer 1

您尝试过使用数据切换吗？它干净简单。

<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" data-toggle="collapse" data-target="#dropdowns"> Open
    </label>
</div>
<div class="col-md-6">
    <label>
        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" data-target="#dropdowns" checked> Closed
    </label>
</div>
<div id="dropdowns" class="collapse">
    <!-- section containing dropdown values -->
</div>