Seite 1 von 3 123 LetzteLetzte
Ergebnis 1 bis 10 von 26

Thema: jQuery Dropdownmenü "click" zuklappen

  1. #1
    Teeny
    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage jQuery Dropdownmenü "click" zuklappen

    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)
    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    TNB
    Gast

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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.

  3. #3
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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.

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage AW: jQuery Dropdownmenü "click" zuklappen

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

  5. #5
    Meister(in) Avatar von Teron Gerofied
    Registriert seit
    26.01.2008
    Ort
    serverraum
    Alter
    26
    Beiträge
    347
    Danke
    0
    Bekam 1 mal "Danke" in 1 Posting

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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 :P
    PHP-Code:
    if(isset($this) || !isset($this)){ // that's the question... 

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage AW: jQuery Dropdownmenü "click" zuklappen

    Und wie sieht dann die Funktion aus?

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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
    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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
    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
    Geändert von the_zoker_09 (14.10.2011 um 14:05 Uhr)

  9. #9
    Kaiser(in)
    Registriert seit
    29.03.2009
    Ort
    1011 1111 1011 WorldWideWeb
    Beiträge
    2.439
    Danke
    2
    Bekam 6 mal "Danke" in 6 Postings

    Standard AW: jQuery Dropdownmenü "click" zuklappen

    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();
    Der, der weiß dass er nichts weiß, weiß mehr als der, der nicht weiß, dass er nichts weiß.
    Wer nach etwas fragt, geht grundsätzlich das Risiko ein, es auch zu bekommen!

  10. #10
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: jQuery Dropdownmenü "click" zuklappen

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

Ähnliche Themen

  1. Rezension: "jQuery - Das Praxisbuch"
    Von Torty im Forum Literaturempfehlungen und Buchbesprechungen ...
    Antworten: 0
    Letzter Beitrag: 09.12.2010, 19:40
  2. Wie erstelle ich ein Element "fixed" aber trotzdem mit "position: relative"?
    Von nilss im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 17.03.2010, 16:35
  3. Dürrenmatts "Der Besuch der alten Dame" und Sophokles' "Ödipus Tyrannos"
    Von Unregistriert im Forum Off Topic und Quasselbox
    Antworten: 3
    Letzter Beitrag: 21.01.2010, 22:22
  4. php: "bitte warten" oder "login läuft"
    Von phore im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 05.04.2006, 18:18
  5. "Click"-Ton abstellen?
    Von Foulfang im Forum Computer - Internet Forum
    Antworten: 1
    Letzter Beitrag: 21.09.2004, 19:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •