problem mit jquery - selector
lima-city → Forum → Programmiersprachen → Sonstige Programmiersprachen
aktuellen inhalt
ausfahren
auto
code
duo
eigene methode
first
http
inhalt
list
miniatur
nachfolgendem code
panel
position
problem
radius
relative miniatur
relative text
sagen
zusammenhang
-
Hi,
ich habe ein Problem mit jquery. Und zwar möchte ich ein sidebarmenü erstellen. Bei anklicken eines menüpunktes "fährt" dieser in die mitte und "öffnet" seinen inhalt. (Siehe: http://juleztesting.lima-city.de/g.php).
Mein problem darin besteht in dem Punkt wo der Menüpunkt seinen Inhalt "ausfährt". Wo das Problem liegt ist klar, denn alle divs der class="panel" werden ja angesprochen (Siehe nachfolgendem Code):
jquery-code:
$(".miniatur").click(function(){ $(this).animate({"left":250}); $(this).css({"position":"absolute", "background-color":"green","-moz-border-radius":"10 10 10 10"}); $(this).animate({'top':0},"slow", function(){ $(this).css({"Height":"100%", "background-color":"green"}); $(this).animate({'width':"500%"},"slow",function(){ $(".panel").slideToggle("slow"); } ); } ); });
html-code:
<div id='sidebar'> <!--********************The first link********************--> <div class="miniatur"> <h4>First</h4> <p class="panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <!--********************The second link********************--> <div class="miniatur"> <h4>Second</h4> <p class="panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <!--********************The third link********************--> <div class="miniatur"> <h4>Third</h4> <p class="panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <!--********************The fourth link********************--> <div class="miniatur"> <h4>Fourth</h4> <p class="panel">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div>
css-code:
#sidebar { width:13%; height:auto; background-color:red; -moz-border-radius: 10px 10px 10px 10px; position:relative; } .miniatur { min-width: 130px; min-height: 2em; height:auto; list-style-type:none; position:relative; text-align:center; } .panel { display:none; }
Wie kann ich nun mit dem this-Selektor sagen, dass er nur den aktuellen Inhalt zeigen soll?
Danke schonmal für die Hilfe
EDIT: Kann jemand das Thema hierhin verschieben: http://www.lima-city.de/board/html-javascript ?. Sry für die arbeit
Beitrag zuletzt geändert: 21.7.2011 10:18:57 von juleztesting -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Hallo!
Gib den einzelnen .panel-divs auch eine Id und sprich sie dann über diese im Selektor an, oder füg eine zweite, jeweils andere Klasse hinzu, dann kannst du die einzelnen "einfahren" lassen. Anders wüsst ich jetzt auf die schnelle nicht, wie mans sinnvoll lösen könnte.
Lg
Edit: Um den Zusammenhang mit der Miniatur-Klasse herzustellen, musst du die zusätzliche Klasse bzw. eine ähnliche Id, aus der du die andere Id ableiten kannst,natürlich auch dort einfügen.
Beitrag zuletzt geändert: 21.7.2011 19:57:43 von markus-niederbrucker -
Hi,
wenn i`ch aber wie gesagt noch eine ID, bzw eine miniatur-Klasse hinzufüge, müsste ich doch für jedes "Menüelement" eine eigene Methode schreiben, oder nicht?
Mit der obigen hat das jedoch mit allen Elementen geklappt.
Naja...ich werkel mal weiter rum :D
Grüße -
<div id='sidebar'> <!--********************The first link********************--> <div class="miniatur [b]first[/b]"> <h4>First</h4> <p class="panel [b]first[/b]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> <!--********************The second link********************--> <div class="miniatur [b]second[/b]"> <h4>Second</h4> <p class="panel [b]second[/b]">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> ... </div>
$(".miniatur").click(function() { ... $(".panel." + $(this).attr("class").substr(6)).slideToggle("slow"); });
Mit diesen Änderungen brauchst du nur eine Funktion und sollte immer das richtige Panel ausfahren!
Lg -
Geht das nicht recht einfach über den child Selektor?
$(this > ".panel").slideToggle("slow");
Ansonsten probier mal: $(this).children(".panel").slideToggle("slow");
Beitrag zuletzt geändert: 1.8.2011 11:17:47 von travianinc -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage