jquery erweitern/wechseln - erste div-Größe
Bitte siehe meinen code unten...
Ich bin verwirrt und wollen zunächst zeigen 30px (in der Höhe) der unter div. Derzeit kann ich nur Umschalten zum ein-oder ausblenden.
Was ich eigentlich will ist, zeigen die ersten 30px und Knebel/alles anzeigen, enthalten unten.
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
$(document).ready(function() {
//Hide the "view" div.
$('div.view').hide();
//Watch for clicks on the "slide" link.
$('div.slide').click(function() {
//When clicked, toggle the "view" div.
$('div.view').slideToggle(400);
return false;
});
});
</script>
</head>
<body>
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</body>
</html>
Dank
InformationsquelleAutor user991830 | 2012-01-20
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen, diese
Hinzufügen dieser css -
JS
Demo
100%
funktioniert nicht richtig, es sei denn, die div ist ein Elternteil mit einer Höhe festlegen, in welchem Fall es wird animieren zu 100% von den Eltern.Überprüfen Sie meine bearbeitete Antwort alle, die behoben wird, zusammen mit der demo
Nur Kommentar ist, dass jetzt, wenn die Breite des Elements ist nicht statisch, nach der Animation auf der alten Höhe, Sie könnten immer noch text abgeschnitten, wenn das Fenster vergrößert wurde. Kann nicht ein Problem sein, wenn.
Ja, es gibt immer einen Weg, zu improvisieren, basierend auf solchen Bedingungen
InformationsquelleAutor ShankarSangoli
OK, also was ich tun würde, ist den Inhalt overflow:hidden, und dann halt dynamisch ändern Sie die Höhe von der box auf den Knebel. Wenn overflow auf hidden gesetzt, dann ist alles, was außerhalb der Breite/Höhe der box wird... naja, es wird ausgeblendet.
So würde man etwas wie das hier tun:
HTML...
Und in der JS...
Sowas, sowieso. Getestet noch nicht, dass code, aber das ist die grundlegende Idee.
Hoffe, das hilft. Viel Glück 🙂
InformationsquelleAutor Jemaclus
CSS:
HTML:
Jquery:
fiddle : http://jsfiddle.net/Vknqw/
Danke für die Antwort.. ich sehe es hier jsfiddle.net/Vknqw was jquery url sollte ich verwenden? ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
yup, dass wird es tun..
check out "docs.jquery.com/UI/Effects/toggleClass#source"
sehr seltsam... ich habe kopiert eveything von hier aus jsfiddle.net/Vknqw und nicht erweitert... <!DOCTYPE html> <html> <head> <script src="ajax.googleapis.com/ajax/libs/jquery/1.7.1/...> <style type="text/css"> .view_height{ height : 50px; overflow:hidden; } p{ width : 400px; } </style> <script type="text/javascript"> $('div.slide').klicken Sie auf(Funktion(){ $('div.view').toggleClass("view_height"); }); </script> </head> <body> <div class="view view_height"> <p>text </p> etc... </div> <div class="slide" style="cursor: pointer;">Show/Hide</div> </body> </html>
InformationsquelleAutor dku.rajkumar
ist es das, was du meinst ?
http://jsfiddle.net/eiu165/ew5dH/
InformationsquelleAutor eiu165
Wenn ich verstehen, was Sie versuchen zu tun, was Sie wirklich brauchen, ist zu animieren, Ihre Höhe zu
auto
. Dies ist jedoch nicht möglich. Ich kam mit dieser zu simulieren:http://jsfiddle.net/txKt7/1/
HINWEIS: Dies ist nur ein proof-of-concept, welches nicht mit Ihrem eigentlichen html-markup. Es würde angepasst werden müssen, um leicht zu passen Ihre genaue situation.
InformationsquelleAutor James Montagne
Sollte sowas ausreichen:
Aktualisiert den code, sollte gut sein. Check out this fiddle link
InformationsquelleAutor daniel0mullins