Was wäre der beste Weg, um eine Art Drop-Down-Info-Div zu machen?

Ich habe 4 divs mit einer mehr Info-Taste auf der Unterseite von jedem, etwa so:Was wäre der beste Weg, um eine Art Drop-Down-Info-Div zu machen?

http://codepen.io/anon/pen/VpVbPq

und wenn ein ‚weitere Informationen‘ Benutzer drückt Ich mag würde es auf den Boden zu verlängern und Zeige zusätzliche Informationen, offensichtlich.

Das Problem ist unter der mehr Info div, Text ist zu sehen, aber was ist, wenn ich was darunter verstecken will, auch wenn seine Deckkraft 0,6 ist?

dachte ich, es das beste gewesen wäre, wenn ich zeichne, was ich brauche, so hier:

Codepen Code unten:

html

<body> 
    <div class="wrapper"> 
    <div class="info"> 
     <p> 
      dummy text 
     </p> 
     <div class="more-info">more info</div> 
     </div> 
     <div class="info"><div class="more-info">more info</div></div> 
     <div class="info"><div class="more-info">more info</div></div> 
     <div class="info"><div class="more-info">more info</div></div> 
    </div> 
</body>

css

.wrapper { 
    width: 1045px; 
    margin: 0 auto; 
} 
.info { 
    width: 500px; height: 200px; 
    background-color: #1A5AB6; 
    display: inline-block; 
    margin: 10px; 
    position: relative; 
    font-size: 20px; 
    overflow: hidden; 
} 
.more-info { 
    width: 100%; height: 40px; 
    background-color: #0C1B44; 
    bottom: 0; left: 0; 
    display: inline-block; 
    position: absolute; 
    font-size: 20px; 
    color: white; 
    line-height: 35px; 
    text-align: center; 
    opacity: 0.6; 
} 
.more-info:hover {background-color: #010716;}

Quelle

2017-03-30 rvsted

Um den Text zu erweitern zu haben, können Sie ein wenig jQuery verwenden, um die Höhe einzustellen automatisch jedoch viel Text anzupassen ist, und blenden Sie die ‚Mehr Info‘ -Taste ganz:

$(".more-info").on("click", function() { 
    $(this).css("opacity", "0"); 
    $(this).parent().css("height", "auto"); 
});

Im Hinblick auf die den Text nicht sichtbar hinter der Schaltfläche ‚weitere Informationen‘, die, würden Sie Notwendigkeit die Opazität auf 1 setzen:

.more-info { 
    opacity: 1; 
}

das die Farbe natürlich verzerrt ein wenig, aber man kann immer die hinter~~POS=TRUNC ändern und schweben Farbe, um dies zu überdecken.

Ich habe einen aktualisierten Stift erstellt, der diese here präsentiert.

Hoffe, das hilft! :)

Quelle

2017-03-30 00:44:34

Ich hatte schon so etwas, leider. Hier ist, was ich habe: http://codepen.io/anon/pen/VpVbPq (ich bearbeitet den ursprünglichen Stift). Wie Sie sehen können, verschwindet das more-info-div nicht und zeigt an: Keines, das ich in die Funktion einsetze, funktioniert nicht, also kann ich das less-info div an seinem Platz nicht setzen. Wie würde ich es machen, wenn ich mehr Informationen drücke, verschwindet es (animiert) und weniger Informationen erscheinen stattdessen an seiner Stelle? – rvsted

Ihre Klassenauswahl Definition ändern, wie unten dargestellt:

.more-info { 
    width: 100%; height: 20%; 
    background-color: #0C1B44; 
    font-size: 20px; 
    color: white; 
    display: block; 
    text-align: center; 
    opacity: 0.6; 
}

Dann diese CSS für Ihr Absatzelement hinzufügen:

p { 
    height: 75%; 
    overflow: hidden; 
    margin: 5px; 
}

Quelle

2017-03-30 00:47:47

Ihre Frage: „Was wäre der beste Weg zu machen eine Art Drop-Down-Info-Info div? "

Es gibt eine eingebaute Funktion in Boot Strap, die Ihnen erlaubt, eine "Daten" -Klasse zu verwenden, die all das Knirschen für Sie erledigt. Rufen Sie einfach ihre CSS-und JS-Dateien extern oder Host auf Ihrem Server. Machen Sie sich mit ihren Datenklassen vertraut und rufen Sie ihre css/js-Klassen auf, um zuvor mühsames Codieren zu vereinfachen, wie zum Beispiel das Aufdecken eines versteckten DIV beim Klick!

Beachten Sie die data-toggle="collapse" und data-target="#more_info" Linien in meinem div, dass die Span-Tag enthält, die für enthüllt die verborgene <div id="more_info"> die Kontrolle:

`<div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div>`

Dann beachten Sie die Klasse in meiner versteckten div. Notieren Sie sich die ID des versteckten Div und das Datenziel #more_info.Dies kann auch für Klassen verwendet werden, zB: .more_info. Alles ist in genauer an Bootstrap Github oder ihrer offiziellen Website erklärt: http://getbootstrap.com/

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">  </script> 
</head> 

<body> 
<div class="wrapper"> 
<div class="info"> 
    <p> 
     Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below. 
    </p> 
    <div data-toggle="collapse" data-target="#more_info"><span class="glyphicon glyphicon-search"></span> <span title="Click for more info">more info</span></div> 
    <div id="more_info" class="collapse">Some hidden infomration you ony want to be seen when the user click on the control link.</div> 
</div>

oder drei divs hinzufügen perfekt, ohne all die CSS schwimmen, jeweils mit Drop-downs weitere Informationen.

<body> 
<div class="wrapper row"> 
    <div class="col-md-4"> 
     <p> 
      Honestly, Bootstrap would be the easiest way to accomplish this without a doubt. Just click the more info button below. 
     </p> 
     <div data-toggle="collapse" data-target="#more_info"> 
      <span class="glyphicon glyphicon-search"></span> 
      <span title="Click for more info">more info</span>                    </div> 
     <div id="more_info" class="collapse"> 
      Some hidden information you only want to be seen when the user click on the control link. 
     </div> 
    </div> 
<div class="col-md-4"> 
    <p> 
     Some other information we want to have a hidden drop down with more info for. 
    </p> 
    <div data-toggle="collapse" data-target="#more_info2"> 
     <span class="glyphicon glyphicon-search"></span> 
     <span title="Click for more info">more info</span> 
    </div> 
    <div id="more_info2" class="collapse"> 
     Some hidden information you only want to be seen when the user click on the control link.</div> 
    </div> 
    <div class="col-md-4"> 
     <p> 
      Yet another div with info that has a drop down menu for more info included below. 
     </p> 
    <div data-toggle="collapse" data-target="#more_info3"> 
     <span class="glyphicon glyphicon-search"></span> 
     <span title="Click for more info">more info</span>  
    </div> 
    <div id="more_info3" class="collapse"> 
     Some hidden infomration you ony want to be seen when the user click on the control link. 
    </div> 
</div>

Viel Glück.

Quelle

2017-03-30 01:29:09

Was wäre der beste Weg, um eine Art Drop-Down-Info-Div zu machen?

Antwort

Verwandte Themen