Question

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

＆＃13;

<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>

＆＃13;

Answer 1

Bootstrap包含可用于show or hide content at certain breakpoints的课程：hidden-sm，hidden-xs等。您可能需要h3。

然后，您可以在h5元素上点击处理程序，切换$(".container-fluid").on("click", "h3", function() { $(this).nextAll("h5").first().toggleClass("hidden-xs"); });上的该类。这将是大屏幕上的无操作，但在较小的屏幕上，它将显示/隐藏元素。

在这个例子中，我使用jQuery作为JavaScript部分（使用事件委托），但这是一个细节;重点是Bootstrap提供的概念和响应类：

<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>

o = _.fromPairs(_.sortBy(_.toPairs(o), 1).reverse())

Answer 2

我相信这可以做你想要的。你必须使用一些jQuery。

首先，我们必须添加一个标识符，以便代码知道要隐藏哪些部分。所以我已经为每个块的父div添加了一个CSS类。该类称为custom-hide。所以每个父div现在看起来像这样：

<div class="col-sm-2 custom-hide">

然后你必须添加一些针对这些div的CSS。所以我写了以下内容：

.custom-hide h5 { 
    display: none; 
}

大！ h5是隐藏的。但现在他们隐藏在一切！所以我们必须添加媒体查询，以便它只发生在移动设备上。所以我做了以下事情：

@media only screen and (max-device-width: 736px) {
    .custom-hide h5 { 
        display: none; 
    }
}

这意味着只有在屏幕宽度为736像素或更低时才应用CSS，非常适合手机。

现在为jQuery。此代码的作用是在单击它时将类custom-show添加或删除到div。由于custom-show类上有!important位，它会覆盖另一个类，并显示h5，但只显示你点击的h5。

我还没有在我的代码段中包含媒体查询，因为否则代码只适用于移动设备（这是您想要的），但代码段仅适用于桌面。

＆＃13;

$('div.custom-hide').on('click', function() {
  $(this).toggleClass("custom-show");
});

＆＃13;

.custom-hide h5 {
  display: none;
}
.custom-show h5 {
  display: block!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid bottom-blue">

  <div class="row">
    <div class="col-sm-2 custom-hide">
      <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 custom-hide">
      <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 custom-hide">
      <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 custom-hide">
      <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 custom-hide">
      <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>

＆＃13;

在移动设备上隐藏部分网站

2 个答案: