Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag22.03.2014 um 22:27 (UTC)    
Titel: Slide Down Menu

Hallo,

ich habe einen Code für ein "Slide Down Menu" gefunden und dieser funktioniert auch. Das Problem ist aber, wenn ich mehrere "Slide Down Menus" auf einer Seite rainpacken will, funktioniert nur das erste, aber die anderen Slide Down Elemente auf der Seite funktionieren nicht.

Eine Beispiel-Seite von mir mit dem Problem:
http://pixooart.de.tl/Anime-Movie.htm

(Die Überschriften anklicken)

Das zweite Slide Down Element ist vom Quellcode her genau wie das erste.

Das ist der Code:
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script>
    $("#dropdown_img_click").click(function () {
      $("#dropdown_img_content").slideToggle("slow");
    });
</script>


#dropdown_img {
    position:relative;
    width:250px; /* Edit slider width */
    text-align:center; /* Edit text align: left, right or center */}
#dropdown_img #dropdown_img_click {
    max-width:100%;
    text-align:center;
    cursor:pointer;
    border:none;}
#dropdown_img #dropdown_img_content {
    margin:10px 0;
    display:none;}
#dropdown_img #dropdown_img_content a {
    display:block;
    line-height:130%;}


<div id="dropdown_img">
    <center><img src="*PLACE IMAGE URL HERE*" id="dropdown_img_click" /></center>
    <div id="dropdown_img_content">
        Enter text here
    </div>
</div>



Kennt Jemand von euch einen anderen Code oder weißt jemand das Problem?
Ich möchte unbedingt mehrere Slide Down Menus auf einer Seite haben.
Beitrag02.04.2014 um 19:33 (UTC)    
Titel: js slide down menü

Das ist doch ganz logisch:
Du verwendest ein Menü mit einer ID. Diese dient deinen Browser dazu, dass er die verschiedenen Elemente deiner Webseite auseinander halten kannst.
Kopierst du nun deinen Quellcode direkt, um mehrere Menüs zu bekommen, so hat das Browser mehrere Elemente mit einer ID und er weiß nicht mehr, auf welches Element er die Anweisung anwenden soll. Deswegen funktioniert nur das 1. Objekt, da die anderen ignoriert werden.

Ich hätte dir geraten, das slide-down-menü mit CSS (:hover) zu realisieren und Javascript als fall-back-funktion für alte Browser zu benützen.
______________
Alles über 3D-Druck | Heimsteuerung mit Rapberry PI | Kontakt - über mich
FAQ YOU!!! - Ich biete keinen Support über PN an!!! - bitte schreibt im Forum
Homepage-Tools: HTML-Grundkurs | Farbtabelle | Mi† Soиdεrzeichen schreiЬen
CSS-Tuturials: CSS-Grundkurs | Transparente Elemente | Farbverläufe | Boxschatten | CSS-Rahmen | Textschatten | Hintergrundbilder
Javascript-Tuturials
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de