Question

我在移动视图上有三个切换按钮。我希望每个内容分别出现，即当我点击一个按钮时，另一个按钮的内容关闭，并被点击的按钮取代。现在，当我点击每个按钮时，其他按钮的内容不会在任何地方消失，它只会出现在彼此之下。有可能以某种方式切换它吗？

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
        Button 1 content
  </button>
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
    <span class="sr-only">Toggle navigation</span>
        Button 2 content
  </button>
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
    <span class="sr-only">Toggle navigation</span>
        Button 3 content
  </button>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
  Content 1
  </div>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
  Content 2
  </div>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
  Content 3
  </div>

Answer 1

按钮的数据目标目前对于所有三个按钮都是相同的，＆＃34;＃bs-navbar-collapse-1＆＃34;。你需要让它们匹配你希望它们打开和关闭的div的id。

  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
    Button 1 content
  </button>
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-2">
      <span class="sr-only">Toggle navigation</span>
    Button 2 content
  </button>
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-3">
      <span class="sr-only">Toggle navigation</span>
    Button 3 content
  </button>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      Content 1
  </div>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-2">
      Content 2
  </div>
  <div class="collapse navbar-collapse" id="bs-navbar-collapse-3">
      Content 3
  </div>

Bootstrap 3几个切换按钮

1 个答案: