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

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

我相信这你想要做什么。你必须使用一些jQuery。

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

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

然后，你必须添加一些CSS目标这些div。所以我写了以下内容：

.custom-hide h5 { 
    display: none; 
} 

太棒了！ h5s是隐藏的。但现在他们隐藏在一切！所以我们必须添加一个媒体查询，所以它只发生在手机上。所以我做了以下工作：

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

这意味着CSS仅适用于屏幕宽度为736像素或更小的情况，适用于手机。

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

我没有在我的代码片段中包含媒体查询，因为否则代码只能在手机上使用（这是您想要的），但片段只能在桌面上使用。

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

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

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

Answer 2

引导有你可以用它来show or hide content at certain breakpoints类：hidden-xs，hidden-sm，等等。你可能会想hidden-xs。

然后，您可以在您的h3元素上使用单击处理程序来切换h5上的该类。这将在大屏幕上无效，但在较小的屏幕上它将显示/隐藏该元素。

在这个例子中，我使用jQuery的JavaScript部分（使用事件委托），但这是一个细节;点是引导提供的概念和敏感类：

$(".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>