Menü aufklappen - alle Reiter klappen gleichzeitig auf

Davicito

Erfahrenes Mitglied
Hallo Leute,

wenn ich auf einen Reiter, in meinem Menü klicke, dann soll dieser nach unten aufklappen.
leider klappen alle Reiter aufeinmal auf. Ich sehe auch gerade nicht das Problem bei mir. Ich habe mir auch einige Beispiele dazu angeschaut und finde keinen so großen Unterschied.
Habt Ihr eine Idee was hier falsch wäre?

HTML:
<div class="uebersichtsplan">
  <ul>
      <li><span>Reiter 1</span>
          <img src="[some picture].jpg" />
      </li>
      <li><span>Reiter 2</span>
          <img src="[some picture].jpg" />
      </li>
      <li><span>Reiter 3</span>
          <img src="[some picture].jpg" />
      </li>
  </ul>   
</div>

Dazu meine JQuery-Code
PHP:
$(document).ready(function(event){
    $('.uebersichtsplan').find('span').click(function(){
           $(this).next().slideToggle();  //Trigger zum auf- und zuklappt.
     });  
});

Liebe Grüße
 
Hi Jan-Frederik,

danke erstmal für die schnelle Antwort. Cool das Online-Überprüfungs-Tool kannte ich nicht. Das werde ich auch mal für meine Zwecke benutzen ^^
Ok also ist mein Code richtig. Dann muss es an WordPress liegen. Denn dort wird aus einem Text-Editor heraus anders gehandelt. solche sachen wie next() oder this kann er auch nicht.
 
Hi,
Jsbin oder jsfiddle sind einfach Editoren für verschiedene Bibliotheken. Hier kann man ganz gut JS getrennt Betrachten.

Es kann sein das Wp dein Js herrausfiltert.

.next(); muss dein Editir nicht können. Das macht die Jquery Bibliothek.
Schonmal geschaut ob alles richtig geladen wird?
 
Du kannst mal schauen, was Dir in der Konsole angezeigt wird, wenn Du folgendes eintippst:
Javascript:
($.fn.next && "$") || (jQuery.fn.next && "jQuery");
 
Zuletzt bearbeitet:
@Hi Jan..,

WP hat die JQuery-Bibliotheken drin. Diese habe ich auch richtig eingebunden. Aber was sein kann ist, dass ich vergessen habe WP zu sagen, dass der Code auch JQuery ist.
Mann muss an Stelle von:
PHP:
$(dokument).ready(function(){
.....
});

folgendes hier eingeben:
PHP:
JQuery(dokument).ready(function($){
.....
});
Da WP auch MooTools or Prototype unterstützt, kann es an Hand des $-Zeichens nicht unterscheiden um welche Script-Sprache es sich tatsächlich handeln soll.
Siehe Link: https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

@Hi einfach nur crack,

da ich in WP keine Console sehe bzw. habe, kann ich das auch nicht testen. Wenn es doch gehen mag, wie?

LG
 
Zuletzt bearbeitet:
Das kommt auf den Browser drauf an, aber jeder moderne Browser hat heutzutage eine eingebaute Konsole. Ergo musst Du nur mal nach Deinem Browser und Konsole suchen, und dann findest Du die Lösung bestimmst selbst heraus ;)
 
Hi,
WP hat die JQuery-Bibliotheken drin.
also eigentlich liegt das, zumindest dachte ich das immer, am jeweiligen Template und nicht an WP.
Das es sich um jQuery handelt kann man eigentlich an deinem Beispielcode sehen ;).

Welchen Browser verwendest du?

Grüße
 
Hi,

also eigentlich liegt das, zumindest dachte ich das immer, am jeweiligen Template und nicht an WP.
Das es sich um jQuery handelt kann man eigentlich an deinem Beispielcode sehen ;).

Welchen Browser verwendest du?

Grüße
Hi das dachte ich ebenfalls... aber in Sachen WordPress bin ich noch relativ neu und ich versteh auch nicht, wieso das da nicht so funktionieren mag.
Browser verwende ich alle gänigen zum Layout-Testen (also IE 11, chrome, mozilla).

LG
 
@einfach nur crack,

ich habe deinen Code:
PHP:
($.fn.next && "$") || (jQuery.fn.next && "jQuery");

auf der Konsolenebene von Chrome (auf WP-Seite) ausprobiert, mit folgendem Fehler.
Code:
($.fn.next && "$") || (jQuery.fn.next && "jQuery");
Uncaught TypeError: Cannot read property 'fn' of undefinedmessage: "Cannot read property 'fn' of 
undefined"stack: (...)get stack: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetterconstructor: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetterconstructor: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetterconstructor: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetterconstructor: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetterconstructor: function () { [native code] }arguments: nullcaller: nulllength: 0name: ""prototype: 
StackTraceGetter__proto__: function Empty() {}<function scope>__proto__: Object__proto__: function Empty() {}
<function scope>__proto__: Object__proto__: function Empty() {}<function scope>__proto__: Object__proto__: 
function Empty() {}<function scope>__proto__: Object__proto__: function Empty() {}<function scope>__proto__: 
Object__proto__: function Empty() {}<function scope>set stack: function () { [native code] }arguments: nullcaller: 
nulllength: 1name: ""prototype: StackTraceSetter__proto__: function Empty() {}<function scope>__proto__: 
Errorconstructor: function TypeError() { [native code] }name: "TypeError"stack: (...)get stack: function () { [native 
code] }set stack: function () { [native code] }__proto__: d(anonymous function) @ 
VM1537:2InjectedScript._evaluateOn @ VM1536:883InjectedScript._evaluateAndWrap @ 
VM1536:816InjectedScript.evaluate @ VM1536:682

LG
 

Neue Beiträge

Zurück