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

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

<svg class="my-svg" height="210" width="400">
  <path style="fill: green" d="M150 0 L75 200 L225 200 Z" />
</svg>

Answer 2

这有帮助吗？

<强> HTML

<input type="radio" id="open" />open
<input type="radio" id="close" />close

    <div class="content">
      <P>
      Your stuff here
      </P>
    </div>

    <div class="content2">
      <P>
      Some other stuff
      </P>
    </div>

<强> CSS

.content {
  display: none;
}

.content2 {
  display: none;
}

<强>的jQuery

$(document).ready(function(){
    $("#open").click(function(){
    $(".content").animate({height: "toggle"}, 500);
    $(".content2").hide();
  });
  $("#close").click(function(){
    $(".content").hide();
    $(".content2").animate({height: "toggle"}, 500);
  });
});

Demo

Answer 3

查看此DEMO

 <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>
    $(document).ready(function(){
    $('#open').attr('checked', true);
       $('#open').click(function() {
       if($('#open').is(':checked')) { $('#divId').removeClass('hidden');}
    });
     $('#close').click(function() {
       if($('#close').is(':checked')) { $('#divId').addClass('hidden');}
    });
    });
    </script>
    </head>
    <body>
     <input type="radio" id="open" name="admin"/>open
    <input type="radio" id="close" name="admin"/>close


        <div class="well" id="divId">     
          Some other stuff

        </div>
    </body>
    </html>

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

3 个答案: