css - 在移动设备上隐藏网站的部分内容

Question

我有以下代码片段，我只想在移动设备上显示标题，除非单击标题。尝试了一些东西，但没有任何效果。

<div class="container-fluid bottom-blue">

  <div class="row">
    <div class="col-sm-2">
      <h3><strong>Executive hire</strong></h3>
      <h5>Mercedes<br>Bently<br>Rolls Royce<br>Jaguar<br>Range Rover<br>BMW<br>Audi</h5>
    </div>
    <div class="col-sm-2">
      <h3>Coach Hire</h3>
      <h5>24 Seater coach<br />29 Seater coach<br />33 Seater coach<br />49 Seater coach<br />51 Seater coach<br />53 Seater coach<br />61 Seater coach<br />87 Seater coach</h5>
    </div>
    <div class="col-sm-2">
      <h3>Limo Hire</h3>
      <h5>White Limo<br />Black Limo<br />Pink Limo<br />Hummer Limo<br />Fire Engine Limo<br />Jeep &amp; Novelty Limo</h5>
    </div>

    <div class="col-sm-2">
      <h3>Minibus Hire</h3>
      <h5>10 Seater minibus<br />11 Seater minibus<br />12 Seater minibus<br />14 Seater minibus<br />14 Seater minibus<br />15 Seater minibus<br />16 Seater minibus</h5>
    </div>

    <div class="col-sm-2">
      <h3>Services</h3>
      <h5>Private & Corporate Travel<br />Local & National Journeys<br />Airport Transfers<br />Sporting Events<br />Weddings<br />Theatre Trips<br />Stag & Hen Parties</h5>
    </div>

    <div class="col-sm-2">
      <h3>AREAS COVERED</h3>
    </div>
  </div>
</div>

Answer 1

Bootstrap 具有可用于 show or hide content at certain breakpoints 的类:hidden-xs、hidden-sm 等。您可能需要 hidden-xs。

然后您可以在 h3 元素上使用一个点击处理程序来切换 h5 上的那个类。这在大屏幕上是空操作，但在小屏幕上它会显示/隐藏元素。

在此示例中，我将 jQuery 用于 JavaScript 部分(使用事件委托(delegate))，但这只是一个细节；重点是 Bootstrap 提供的概念和响应类:

$(".container-fluid").on("click", "h3", function() {
  $(this).nextAll("h5").first().toggleClass("hidden-xs");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid bottom-blue">

  <div class="row">
    <div class="col-sm-2">
      <h3><strong>Executive hire</strong></h3>
      <h5 class="hidden-xs">Mercedes<br>Bently<br>Rolls Royce<br>Jaguar<br>Range Rover<br>BMW<br>Audi</h5>
    </div>
    <div class="col-sm-2">
      <h3>Coach Hire</h3>
      <h5 class="hidden-xs">24 Seater coach<br />29 Seater coach<br />33 Seater coach<br />49 Seater coach<br />51 Seater coach<br />53 Seater coach<br />61 Seater coach<br />87 Seater coach</h5>
    </div>
    <div class="col-sm-2">
      <h3>Limo Hire</h3>
      <h5 class="hidden-xs">White Limo<br />Black Limo<br />Pink Limo<br />Hummer Limo<br />Fire Engine Limo<br />Jeep &amp; Novelty Limo</h5>
    </div>

    <div class="col-sm-2">
      <h3>Minibus Hire</h3>
      <h5 class="hidden-xs">10 Seater minibus<br />11 Seater minibus<br />12 Seater minibus<br />14 Seater minibus<br />14 Seater minibus<br />15 Seater minibus<br />16 Seater minibus</h5>
    </div>

    <div class="col-sm-2">
      <h3>Services</h3>
      <h5 class="hidden-xs">Private & Corporate Travel<br />Local & National Journeys<br />Airport Transfers<br />Sporting Events<br />Weddings<br />Theatre Trips<br />Stag & Hen Parties</h5>
    </div>

    <div class="col-sm-2">
      <h3>AREAS COVERED</h3>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>