jQuery Dropdownmenü "click" zuklappen

the_zoker_09

Hallo zusammen,

Ich habe mir aus dem Inet ein Script für ein Dropdownmenü geholt.
Nun war das aber ein "mouseover" Script und ich habe es durch "click" ersetzt.

Code

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/


//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}


var jquerycssmenu={


fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds


buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
            $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            $curobj.click(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
                },
                function(e){
                    $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}


//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu("myjquerymenu", arrowimages)

Alles anzeigen

Jetzt ist das Problem, dass wenn das Dropdownmenüü einmal geöffnet ist, es sich nicht wieder schliesst.

Deshalb möchte ich so einen Aktionsreienfolge:

Code

click: Dropdownliste erscheint
 |-> click: Dropdownliste verschwindet
 |-> click irgendwo anders hin: Dropdownliste verschwindet auch

Wie kann ich das machen?

Wie sehen dann die Aktionen aus?

Vielen Dank
the_zoker_09

TNB

Mal davon abgesehen, dass ich nicht der große JavaScript-Experte bin, ist das, was du da vorhast, völlig benutzerunfreundlich. Ich muss erst irgendwo klicken, damit das Menü verschwindet? Das ist doch grausam!

Ich schätze mal, du wirst da was mit onFocus machen müssen, aber wie gesagt, JavaScript ist nicht meine Welt.

the_zoker_09

Das ist in vielen vBulletin Foren so.
Und ich finde das überhaupt nicht User unfreundlich.
Man klickt auf den Namen und das Dropdownmenü öffnet sich.
Dann klickt man nochmal auf den Namen oder irgendwo anders hin und das Dropdownmenü schließt sich wieder.

Ich mein das ist mit Windows nicht anders:
Drückst du auf Start, öffnet sich ein "Dropdownmenü".
Klickst du nochmal auf Start oder irgendwo auf den Desktop, schließt sich das Start Menü wieder.

the_zoker_09

kann mir jetzt mal jemand ernsthaft antworten?
Nicht so unützige "ich bin nicht registriert und kann deshalb schreiben was ich will" Kommentare.

Teron Gerofied

Der Trick liegt darin einen Listener zu schreiben, der auf die gesamte Seite bezogen ist, etwa:

Code

$('body').bind( "click", function() {
  // schließe offene Menüs
});

... da es eben kein Gegenteil von klicken gibt - kein unclick oder so

the_zoker_09

Und wie sieht dann die Funktion aus?

synaptic

naja das is bei deinem fertigen script nicht soo einfach zu machen, du brauchst jetzt zusätzlich etwas, das zeigt welches element aktiv ist...

mal ein auszug aus deinem script:

Code

$curobj.click(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
                },
                function(e){
                    $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
                }
            ) //end hover

Alles anzeigen

du hast hover durch click ersetzt, also ist das, was im callback steht deine schliessen-funktion

Code

,
                function(e){
                    $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
                }

der callback wird durch das komma (ich habs mal mitkopiert) in der hover-function gekennzeichnet (ne funktion nach nem komma ist nahezu immer die callback-funktion)

da in der ganzen faxe mit $(this) auf das aktuelle element referenziert wird, brauchst du nun einen identifier sagen wir mal ein klassenname der muss in der click-action gesetzt werden.

zB so

Code

$targetul.addClass('js_myActiveMenu');

und dann nimmste mal die callback-funktion aus dem click raus, denn so müsste eigentlich das menu wieder zu sein bevor du es wirklich offen gesehen hast

und haust die in eine eigene funktion rain, wie der teron oben bereits beschrieben hatte.

Code

$(document).bind( "click", function() {
function(e){          $('.js_myActiveMenu').fadeOut(jquerycssmenu.fadesettings.outduration)
        }  });

du solltest hier nur noch sicherstellen, dass die parameter:

jquerycssmenu.fadesettings.outduration

auch in dieser funktion verfügbar sind oder einfach eigene setzen

das ganze gescripte von mir hier oben ist UNGETESTET und soll dir nur den way to go zeigen

the_zoker_09

Also sollte der Code dann so ausehen oder?

Code

$curobj.click(
                $targetul.addClass('js_myActiveMenu');
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
                },
                function(e){
                    $(document).bind( "click", function() {
                        function(e){
                            $('.js_myActiveMenu').fadeOut(jquerycssmenu.fadesettings.outduration)
                        }
                    });
                }
            ) //end hover

Alles anzeigen

Ich habe ausserdem das Problem, dass ich den

Code

<div id="myjquerymenu" class="jquerycssmenu">

Eintrag mehrmals auf der Seite brauche, er aber nur bei dem ersten Dropdown Menü funktioniert. Beiden anderen nicht. Kann es sein, dass so ein "id=..." nur einmal vorkommen darf?

Wie kann ich das so ändern, dass es auch mehrmals funktioniert?

Vielen Dank
the_zoker_09

Tobse

Grundlagen...
Wenn du schreibst

Code

$("#myjquerymenu").menu(...);

Dann wird WAS angesprochen?
Richtig, das Element mit der ID myjquerymenu, welches wie oft existieren darf?
Daraus folgt:

Code

$(".jquerycssmenu").bind();

the_zoker_09

Ich versteh deine Antwort nicht ganz.
Was soll ich jetzt ändern?

Tobse

Denk nochmal nach. ID ganz heisst "Identdifier" zu deutsch "Indentifikation". Der Personalausweis auf Englsich heisst auch "ID".
IDs in HTML dürfen deshalb nur einmal im gesammten dokument vergeben werden. Wenn du also mehrmals

HTML

<div id="myjqeruymenu" class="jquerycssmenu"></div>

in deinem Quelltext hast, findet der browser nur eins, denn:

Code

$("#myjquerymenu") == $(document.getElementById("myjqerymenu"));

Aber du hast noch etwas anderes, was beliebig oft verwendet werden darf - Klassen. Und die werden per CSS mit einem . angesprochen, z.B.

Code

.jquerycssmenu {
}

im CSS spricht alle divs mit der Klasse "jquerycssmenu" an. Muss ich noch mehr sagen?

the_zoker_09

Also meinst du ich soll einfach

Code

<div id="myjquerymenu" class="jquerycssmenu">

in

Code

<div class="myjquerymenu" class="jquerycssmenu">

ändern?

Tobse

Nein. Du sollst

Code

$("#myjquerymenu").menu(...);

in

Code

$(".jquerycssmenu").menu(...);

ändern.

the_zoker_09

Und wo steht

Code

$("#myjquerymenu").menu(...);

kann des irgendwie grad nicht finden

Tobse

Eigentlich meinte ich diese Zeile:

Code

jquerycssmenu.buildmenu("myjquerymenu", arrowimages);

Bei einem Blick in den Code ist mir aber aufgefallen, dass dein Skript ja nach der ID fragt. Hab das ganze jetzt geändert. Benutz dashier

Code

/*********************
//* jQuery Multi Level CSS Menu (horizontal)- By Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//* Menu instructions page: http://www.dynamicdrive.com/dynamicindex1/ddlevelsmenu/
//* Last modified: Sept 6th, 08'. Usage Terms: http://www.dynamicdrive.com/style/csslibrary/tos/
*********************/


//Specify full URL to down and right arrow images (25 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', 'arrow-down.gif', 25], right:['rightarrowclass', 'arrow-right.gif']}


var jquerycssmenu={


fadesettings: {overduration: 350, outduration: 100}, //duration of fade in/ out animation, in milliseconds


buildmenu:function(menu_css, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$(menu_css+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
            $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            $curobj.click(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    $targetul.css({left:menuleft+"px"}).fadeIn(jquerycssmenu.fadesettings.overduration)
                },
                function(e){
                    $(this).children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
                }
            ) //end hover
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}


//build menu with ID="myjquerymenu" on page:
jquerycssmenu.buildmenu(".jquerycssmenu", arrowimages);

Alles anzeigen

the_zoker_09

Ok vielen Dank.

Das mit dem mehrmals öffnen funktioniert.

Und wie kann ich das jetzt noch ändern, dass man das Dropdownmenü auch wieder schließen kann?

Und zwar:

Wenn man wieder auf den Link klickt
Wenn man irgendwo anders hinklickt (also weder auf den Link, weil dann gehts ja über 1. noch auf einen Eintrag in dem Dropdownmenü, weil dann soll es sich ja nicht schliessen)

Vielen Dank
the_zoker_09

Tobse

Wenn du es geschafft hast, "mouseover" durch "klick" zu ersetzen, kannst du das auch. Setz dich mit JS auseinander, dann klappt das.

the_zoker_09

Hast du wenigstens ein oder zwei Anhaltspunkte?

Ich mein sowas wie unclick gibts ja eben nicht

Tobse

Benutz schon click. Was dir helfen wird ist das Stichwort "event-bubbling", darunter die Eigenschaft event.cancelBubble.

the_zoker_09

Ich hab leider nicht sehr viel hilfreiches gefundene, wie ich das anwenden kann.
Ich kenn mich einfach in der Sprache zu wenig aus

Tags