html - 如何拥有一组按钮，效果类似 Accordion ，一次只显示一个下拉菜单？

Question

尝试创建一个简单的餐厅菜单。这个想法是在顶部有一堆按钮，每个按钮都有标签(例如煎蛋卷、煎饼、墨西哥卷饼等)。按下按钮时，类别信息将下拉。

但是，我只想一次显示一个类别。所以，如果你按下煎蛋卷，煎蛋卷选项就会下拉。然后你按下煎饼，煎蛋卷信息消失，煎饼信息下降。

我对如何实现这一目标感到困惑。我用 Accordion 尝试了类似的东西，但这不是我想要的。

这是目前为止我得到的(菜单信息不完整，但你明白了):

<p>
   <div class="container"><div class="row justify-content-center">
    <a class="btn btn-primary mt-3 ml-1 mr-1" data-toggle="collapse" href="#omelet" role="button" aria-expanded="false" aria-controls="omelet">Omelets — Proven Favorites!</a>
    <button class="btn btn-primary mt-3 ml-1 mr-1" type="button" data-toggle="collapse" data-target="#favorites" aria-expanded="false" aria-controls="favorites">Favorites of Our Regulars</button>
    <button class="btn btn-primary mt-3 ml-1 mr-1" type="button" data-toggle="collapse" data-target="#eggCombo" aria-expanded="false" aria-controls="eggCombo">Egg Combinations</button>
  </div></div>
  </p>

  <div class="row">
    <div class="">
      <div class="collapse multi-collapse" id="omelet">
        <div class="card card-body">
            <div>
                <b>Cheese Omelet</b> — Choice of Jack, Cheddar, Swiss, Cream Cheese or Bleu Cheese
              </div>
              <div>
                <b>Turkey, Spinach, Onion, & Cheese Omelet</b><br>
              </div>
              <div>
                <b>Mushroom & Cheese Omelet</b>
              </div>
              <div>
                <b>Chili Cheese Omelet</b>
              </div>
              <div>
                <b>Veggie & Cheese Omelet</b> — Sautéed Mushrooms, Onions, Green Peppes, Zucchini, & Spinach
              </div>
              <div>
                <b>Avocado, Cream Cheese & Chive Omelet</b>
              </div>
              <div>
                <b>Mexican Cheese Omelet</b> — Chorizo, Mushrooms, Onions, Green Peppers, Zucchini, & Jack Cheese
              </div>
              <div>
                <b>Spinach, Mushroom & Cheese Omelet</b> — Hugh & Jean Special
              </div>
        </div>
      </div>
    </div>
    <div class="">
      <div class="collapse multi-collapse" id="favorites">
        <div class="card card-body">
          <b>André's Suggestions</b> — 1 biscuit & sausage gravy with 2 eggs & 2 strips of bacon; OR 1 biscuit & veggie gravy with extra veggies & fruit<br>
          <b>Whoopie's Breakfast</b> — 2 eggs any style, bacon, potatoes, toast, and large orange juice<br>
          <b>Nova's Favorite</b> — Spinach, eggs, and cheese scrumptiously scrambled and served with fruit, tortillas, small fresh squeezed O.J. and lots of salsa<br>
          <b>Bob's High Carbohydrate Runner's Breakfast</b> — 1 high protein pancake, 2 eggs any style, and potatoes<br>
          <b>Lily's Special</b> — Bowl of rice & cheese, small fruit plate, muffin<br>
          <b>Laura's Regular</b> — 1/2 raisin bread French toast, 2 strips of bacon, 1 egg<br>
          <b>Damian's Breakfast Burrito</b> — 2 eggs scrambled with salsa, avocado, and cheese, rolled in a tortilla, topped with sour cream and served with potatoes<br>
          <b>Dick's Diet Delight</b> — 2 eggs poached on an English muffin, seasonal fruit or small O.J.<br>
          <b>John's Special</b> — Granola with seasonal fruit and muffin; OR oatmeal with seasonal fruit and muffin<br>
        </div>
      </div>
    </div>
    <div class="">
        <div class="collapse multi-collapse" id="eggCombo">
          <div class="card card-body">
            <div>1 egg any style</div>
            <div>2 eggs any style</div>
            <div>2 eggs, 2 strips of Bacon</div>
            <div>2 eggs, 4 strips of bacon</div>
            <div>2 eggs, sausage</div>
            <div>2 eggs Ham <i>PJ's Fave</i></div>
            <div>2 eggs, turkey</div>
            <div>2 eggs, hamburger patty</div>
            <div>2 eggs, corned beef hash</div>
            <div>Huevos rancheros</div>
            <div>Rudy's Huevos Rancheros <i>Chorizo, beans, & green chilies</i></div>
          </div>
        </div>
      </div>
  </div>

我只想按下最后一个按钮来显示关联的卡片。使用 Bootstrap4，我能做什么？

Answer 1

Toggleable Tabs似乎更适合您的用例 - 您可以将按钮的样式设置为 #007bff 或浅粉色或其他颜色...当您单击一个选项卡时，只有一个包含相应信息的选项卡在下方打开并且其他人保持隐藏状态。

片段如下:

.nav-item {
  background: lightgreen
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="container">
  <br>
  <!-- Nav tabs -->
  <ul class="nav nav-pills nav-justified" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" data-toggle="pill" href="#home">Omelets — Proven Favorites</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu1">Favorites of Our Regulars</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-toggle="pill" href="#menu2">Egg Combinations</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div id="home" class="container tab-pane active"><br>
      <h4>Omelets</h4>
      <div class="card card-body">
        <div>
          <b>Cheese Omelet</b> — Choice of Jack, Cheddar, Swiss, Cream Cheese or Bleu Cheese
        </div>
        <div>
          <b>Turkey, Spinach, Onion, & Cheese Omelet</b><br>
        </div>
        <div>
          <b>Mushroom & Cheese Omelet</b>
        </div>
        <div>
          <b>Chili Cheese Omelet</b>
        </div>
        <div>
          <b>Veggie & Cheese Omelet</b> — Sautéed Mushrooms, Onions, Green Peppes, Zucchini, & Spinach
        </div>
        <div>
          <b>Avocado, Cream Cheese & Chive Omelet</b>
        </div>
        <div>
          <b>Mexican Cheese Omelet</b> — Chorizo, Mushrooms, Onions, Green Peppers, Zucchini, & Jack Cheese
        </div>
        <div>
          <b>Spinach, Mushroom & Cheese Omelet</b> — Hugh & Jean Special
        </div>
      </div>
    </div>
    <div id="menu1" class="container tab-pane fade"><br>
      <h4>Favorites of Our Regulars</h4>
      <div class="card card-body">
        <b>André's Suggestions</b> — 1 biscuit & sausage gravy with 2 eggs & 2 strips of bacon; OR 1 biscuit & veggie gravy with extra veggies & fruit<br>
        <b>Whoopie's Breakfast</b> — 2 eggs any style, bacon, potatoes, toast, and large orange juice<br>
        <b>Nova's Favorite</b> — Spinach, eggs, and cheese scrumptiously scrambled and served with fruit, tortillas, small fresh squeezed O.J. and lots of salsa<br>
        <b>Bob's High Carbohydrate Runner's Breakfast</b> — 1 high protein pancake, 2 eggs any style, and potatoes<br>
        <b>Lily's Special</b> — Bowl of rice & cheese, small fruit plate, muffin<br>
        <b>Laura's Regular</b> — 1/2 raisin bread French toast, 2 strips of bacon, 1 egg<br>
        <b>Damian's Breakfast Burrito</b> — 2 eggs scrambled with salsa, avocado, and cheese, rolled in a tortilla, topped with sour cream and served with potatoes<br>
        <b>Dick's Diet Delight</b> — 2 eggs poached on an English muffin, seasonal fruit or small O.J.<br>
        <b>John's Special</b> — Granola with seasonal fruit and muffin; OR oatmeal with seasonal fruit and muffin<br>
      </div>
    </div>
    <div id="menu2" class="container tab-pane fade"><br>
      <h3>Egg Combinations</h3>
      <div class="card card-body">
        <div>1 egg any style</div>
        <div>2 eggs any style</div>
        <div>2 eggs, 2 strips of Bacon</div>
        <div>2 eggs, 4 strips of bacon</div>
        <div>2 eggs, sausage</div>
        <div>2 eggs Ham <i>PJ's Fave</i></div>
        <div>2 eggs, turkey</div>
        <div>2 eggs, hamburger patty</div>
        <div>2 eggs, corned beef hash</div>
        <div>Huevos rancheros</div>
        <div>Rudy's Huevos Rancheros <i>Chorizo, beans, & green chilies</i></div>
      </div>
    </div>
  </div>
</div>