verstecken Teile der Website auf mobilen Devices

Question

Ich habe das folgende Code-Schnipsel und ich möchte nur die Header auf Handy zeigen, es sei denn, die Überschrift ist angeklickt. Habe ein paar Dinge versucht, aber nichts funktioniert.

<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

Ich glaube, das tut, was Sie wollen. Sie müssen einige jQuery verwenden.

Zuerst müssen wir eine Kennung hinzufügen, damit der Code weiß, welche Teile er verstecken soll. Also habe ich eine CSS-Klasse zum Elternteil jedes Blocks hinzugefügt. Die Klasse heißt custom-hide. Also jeder Elternteil div sieht nun wie folgt aus:

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

Dann müssen Sie einige CSS hinzufügen, die diese divs als Ziel hat. Also schrieb ich folgendes:

.custom-hide h5 { 
    display: none; 
} 

Großartig! Die h5s sind versteckt. Aber jetzt sind sie auf alles versteckt! Also müssen wir eine Medienabfrage hinzufügen, so dass es nur auf Handys passiert. Also habe ich folgende:

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

Dies bedeutet, dass die CSS nur, wenn die Bildschirmbreite angelegt werden 736 Pixel oder weniger, ideal für Handys.

Jetzt für die jQuery. Was dieser Code macht, fügt die Klasse custom-show zum div hinzu oder entfernt sie, wenn Sie darauf klicken. Und da die Klasse custom-show das Bit !important enthält, überschreibt sie die andere Klasse und zeigt das h5 an, aber nur das h5 des angeklickten.

Ich habe die Medienabfrage nicht in mein Snippet aufgenommen, weil der Code sonst nur auf Handys funktioniert (was Sie wollen), aber Snippets funktionieren nur auf Desktops.

$('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

Bootstrap hat Klassen, die Sie show or hide content at certain breakpoints verwenden können: hidden-xs, hidden-sm, etc. Sie wahrscheinlich hidden-xs wollen würden.

Sie können dann einen Click-Handler auf Ihre h3 Elemente verwenden, die diese Klasse auf h5 schaltet. Dies wird auf größeren Bildschirmen nicht angezeigt, aber bei kleineren Bildschirmen wird das Element ein-/ausgeblendet.

In diesem Beispiel verwende ich jQuery für den JavaScript-Teil (mit Ereignisdelegierung), aber das ist ein Detail; der Punkt ist, die Konzepte und die Veränderbarkeit von Bootstrap bereitgestellten Klassen:

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