XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   .mouseleave/ .mouseout - Problem (http://xhtmlforum.de/showthread.php?t=73666)

KATERchen 29.10.2018 12:15

.mouseleave/ .mouseout - Problem
 
Hallo,
ich habe eine kleine Navigation mit einem PullDown-Menü. (übrigens mein ersten jQuery, daher wirklich simpel). Jetzt wollte ich erreichen, dass beim Verlassen des Menüs dieses wieder "eingefahren" wird. Ich habe es mit mouseleave und mouseout versucht, aber es klappt nicht.
Kann mir wer sagen, wo der Fehler liegt?

HTML-Code:

<div id="hd_naviOben">
  <ul class="hd_naviObenListe">
        <li id="hd_nOL1">Verkauf
          <ul id="hd_nOL_show1">
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
          </ul>
        </li>
        <li id="hd_nOL2">Infos
          <ul id="hd_nOL_show2">
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
                <li class="hd_nOL_but"></li>
          </ul>
        </li>
          <li id="hd_nOL3">Ausstellungen</li>
  </ul>
</div>

Code:

$(document).ready(function(){
    $('#hd_nOL1').click(function(){
            $('#hd_nOL_show1').toggle(150);
        $('#hd_nOL_show2').hide(150);
    })
    $('#hd_nOL2').click(function(){
            $('#hd_nOL_show2').toggle(150);
        $('#hd_nOL_show1').hide(150);
    })
    $('#hd_naviOben').mouseleave(function(){
            $('hd_nOL_show1, hd_nOL_show2').hide(150);
    })


cloned 29.10.2018 12:24

$('hd_nOL_show1, hd_nOL_show2').hide(150); <-- hier fehlt dir zumindest einmal das # bzw . Zeichen.
So wie es hier steht blendest du alle Elemente <hd_nOL_show1> </hd_nOL_show1> und <hd_nOL-show2> </hd_nOL-show2> aus. Du möchtest aber Elemente mit der ID ansprechen.

Kleiner Hinweis noch:
Gewöhne dir doch gleich zu Beginn an, die .on Funktion von jQuery zu verwenden.
Also zB statt $(...).click ist es besser $(...).on('click', function() {[...]} ), bzw. $(...).on('mouseleave', function() {[...]}); etc. zu schreiben. Der Vorteil davon ist, dass du auch mehrere Events kombinieren kannst, also zB $(...).on('click mouseleave', function() {[...]})

KATERchen 29.10.2018 12:31

Zitat:

Zitat von cloned (Beitrag 553124)
$('hd_nOL_show1, hd_nOL_show2').hide(150); <-- hier fehlt dir zumindest einmal das # bzw . Zeichen.

Autsch... okay, so viel Wissen habe ich eigentlich schon. Hab x-mal nach fehlenden Kommas und Punkten und auch # gesucht, aber da ist es mir nicht aufgefallen. Danke :)

Das mit dem .on werde ich mir merken, auch hier danke :)


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:37 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2020, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019