• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Menü-Inhalt erscheint erst beim zweiten Klick

J

Jahava

New member
Hallo zusammen :)

Leider hab ich folgendes Problem:

Ich habe mit CSS zwei Menüs erstellt (Menü 1 und Menü 2) und will diese jeweils mit einem dazugehörigen JavaScript-Code aufrufen. Das funktioniert auch alles wunderbar, jedoch mit einem kleinen Makel: Wenn die Seite neu geladen ist, muss man bei Menü 1 den Link immer erst zweimal anklicken bevor der Inhalt erscheint. Wenn es dann einmal erschienen ist, funktioniert es fortlaufend wie gewünscht. Nur halt beim ersten Besuch der Seite nicht.
Bei Menü 2 funktioniert es dagegen stets auf Anhieb.

Was mich vor allem wundert, ist, dass die beiden JavaScript-Codes identisch sind (mit Ausnahme natürlich der jeweiligen Class- bzw Link-Namen). Aber vielleicht ist ja genau das das Problem.





<!-- Menü 1 Anfang -->

HTML: 
<script language="JavaScript" type="text/javascript">		
$(document).ready(function() {
    var content = $('.content');
	
    $('#trigger1').live('click', function() {
        $(this).toggle(function() {
           
            content.removeClass('reverse1').addClass('running1');
        }, function() {
           
            content.removeClass('running1').addClass('reverse1');
        }).trigger1('click');
    });
	
});
</script>

<!-- Menü 1 Ende -->





<!-- Menü 2 Anfang -->

HTML: 
<script language="JavaScript" type="text/javascript">		
$(document).ready(function() {
    var content = $('.content');
	
    $('#trigger2').live('click', function() {
        $(this).toggle(function() {
           
            content.removeClass('reverse2').addClass('running2');
        }, function() {
           
            content.removeClass('running2').addClass('reverse2');
        }).trigger2('click');
    });
	
});
</script>


<!-- Menü 2 Ende -->





Wie ihr seht sind die Codes gleich; mit Ausnahme trigger, running, reverse


Was Java betrifft bin ich ziemlicher Anfänger und komme daher auf keinen grünen Zweig. Auch die Suche in diesem Forum und per Google zu ähnlichen Problemen brachte keinen Erfolg.

Ich bin also echt am Verzweifeln und wäre über eure Hilfe überaus dankbar! :)
 
Zuletzt bearbeitet von einem Moderator:
Mit CSS kannst du styles machen. HTML-Elemente werden schon noch benötigt.
In deinem Code sind noch Fehler. In den JS-Bereich kommt '<script language="JavaScript" type="text/javascript">' u.Ä. nicht rein. Wunderst du dich nicht über die Ausgabe '}//]]}'?
Du willst also normalerweise versteckte Menüs auf Knopfdruck sichtbar machen.

Schau dir mal jQuery's hide() und show() Funktionen an. Im Auslöserknopf platzierst du ein onclick, dass das entsprechende Menühauptelement zeigt und das onclick des buttons auf hide setzt. Kannst dir dafür sogar ne Funktion schreiben, macht Dinge bei vielen (>5) Menüs einfacher. Am Anfang müssen alle Menüs Versteckt sein, das geht z.B. mit ner Klasse in den Menüs, die du dann in jQuery alle hidest.

- - - Aktualisiert - - -

Achte auf die Reihenfolge: Erst die Funktion im head, dann die Elemente, dann der hide()-Code am Schluss.
 
Sorry, habs nun funktional gemacht. Mir war die Ausgabe erstmal egal, da ich dachte man erkennt den Fehler gleich im Code.
Genau, erst versteckt, dann sichtbar: https://jsfiddle.net/6jhu7gd3/20/
Wie man sehen kann, erscheint das eine Menü erst nach dem zweiten Klick auf das linke Feld (allerdings nur wenn die Seite neu geladen ist. Anschließend erscheint und verschwindet es bei jedem Klick). Beim rechten Feld/Menü gehts auf Anhieb.

Danke noch für den Tipp mit hide() und show(). Bin wie gesagt total Anfänger und hatte bisher kaum Zeit mich richtig einzulesen. Sollte ich den Fehler bei meinem jetzigen Menü nicht in den Griff kriegen, dann versuch ichs mal mit dem hide-show-onclick-dingens :)
 
So, nun hab ich es endlich hingekriegt :D

Und zwar mit folgendem Code:

HTML: 
<script language="JavaScript" type="text/javascript">		

$(document).ready(function() {
    var content = $('.content');
	  
    $('#trigger1').click(function() {
      $ ('.content').removeClass('running1').addClass('reverse1'); <!-- Menü verschwindet -->
        }, function() {
               
      });
     
    $('#trigger1').toggle(function() {
      $ ('.content').removeClass('reverse1').addClass('running1'); <!-- Menü erscheint -->
        }, function() {   
        
    });
	
});
</script>


Auf https://jsfiddle.net/6jhu7gd3/50/ funktioniert es in der Ausgabe allerdings nicht komplett (Menüs erscheinen nur, aber verschwinden beim zweiten Klick nicht). Wieso auch immer...
Die Fehlerkonsole zeigt jedoch keinen Fehler mehr an und auch FF und Chrome scheinen alles richtig zu interpretieren. Der IE zwar nicht, aber das juckt mich nicht.

Fürs Erste bin ich also zufrieden und danke nochmal an alle hilfsbereiten Java-Experten! :)
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben