Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „jQuery special slide down (in WP)“

LRG

StyleIkone

nabend allerseits,

ich habs wiedermal ne ganze weile mit blindem rumprobieren versucht, komm aber nichtmehr weiter :p

Ziel: ich möchte für WordPress eine Slide Down Navi in JavaScript/jQuery.

Wordpress is aufgesetzt und bis zu nem gewissen Punkt läuft das mit der Navi auch schon wie ich das möchte, nur das einklappen geht nicht ?!

hier mal der direkte link auf die Seite (es bleibt bei drei Hauptmenüpunkten und nur bei "Portfolio" wirds mehrere Unterseiten geben)



ich hab die Up/Down - Buttons deshalb reingemacht, da ich diese "unsichtbar" über die Überpunkte legen möchte, sobald alles läuft, um nur eine Seite zu laden wenn denn ein Name ausgewählt wird und nicht schon wenn ein Jahr angeklickt wird.

Problem is nun wie gesagt das er mir das nichtmehr schließt und ich komm nicht drauf warum...bzw. ich seh in firebug das er mir die class einfach nicht wechselt...aber ich weiß nicht wieso...normal sollte es so funktionieren (also so les ich den code) wenn der open button geklickt wird, wird erstmal alles geschlossen an <ul>s und dann die jeweilige <ul> geöffnet. Funkioniert auch nur soweit, das er die jeweilige öffnet, er schließt aber nichts anderes...und umgekehrt, also mit dem close button geht mal gleich gar nix...aber seht selbst ;-)

achja und vll bin ich auch ganz auf dem holzweg, denn der erste punkt (in dem fall portfolio) bekommt auch einen button (oben rechts in der ecke von der seite)...weil die funktion ja wohl iwie vor jede ul einen hinstöpselt was im ersten fall aber nicht nötig bzw. nicht gewünscht is...

hier extra nochmal die einzelnen code snippets

JS im Head-Bereich meiner Header.php
Code:
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() {
        $(".page_item ul").hide(); 
        $(".current_page_item").parents("ul").show(); 
        $(".current_page_item ul:first").slideDown();

        $(".page_item > ul:hidden").before('<a href="#" class="menuToggle menuToggleOpen">v</a>'); 
        $(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>'); 
        a = function(){ 
            $(this).text("^").next("ul").slideDown(); 
        }; 
        b = function(){ 
            $(this).text("v").next("ul").slideUp(); 
        }; 
        $(".menuToggleClose").toggle(b,a);
        $(".menuToggleOpen").toggle(a,b);    
    });    
</script>


Navigation im Body meiner Header.php
Code:
<div id="nav" class="clearfix">
    <ul>
        <?php wp_list_pages('title_li='); ?>
    </ul> 
</div>


Der möglicherweiße relevante CSS-Teil für die Navi
Code:
#nav{
    background:#fff;
    font-size:1.2em;
    margin-bottom:30px;
    padding:0;
    width:350px;
    height:300px;
    z-index:1;
}

#nav ul{
    list-style-type:none;
}
#nav ul li{
    font-weight:bold;    
    float:left;
    letter-spacing:1px;
    margin-bottom:-3px;
    margin-right:10px;
    padding:2px 5px;
}
#nav ul li a{
    color:#000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
#nav ul li a:hover{
    color:#E0EEE5;
}
#nav ul li ul{
    position:relative;
    width:50px;
}
#nav ul li ul li{
    position:relative;
    width:100px;
}
#nav li ul {
    margin-left: 1em;
}
#nav .menuToggle {
    position: absolute !important;
    top: 0px !important;
    right: 0px !important;
    color: #397388;
    padding: 2px 7px 4px 7px !important;    
    background: #F0F0F0 !important;
    border-width: 0 !important;
    margin: 0 !important;
    font-weight: bold !important;
}
#nav .menuToggle:hover {
    color: #fff;
    background: #DDD !important;
}
.current_page_item>a {
    font-weight: bold;
}

Ich hoffe ich habs verständlich rüber gebracht und mir kann jemand weiterhelfen :)

Danke im Voraus,

LRG
 

saila

Moderatorle

AW: jQuery special slide down (in WP)

Hi,

also zum einen - warum setzt du parent/s ein, wenn du per click das children (ul-tag) ansprechen kannst?
sieht wie folgt aus:
Code:
$('#id > li').click(function() {
    // falls bereits irgendwo geöffnet - löschen
    $('#id > li').removeClass('active');
    // setze klasse für den aktuell angeklicken li-tag
    $(this).addClass('active');
    // nimm display: block aus ul-tags raus
    $('#id > li > ul').removeAttr('style');
    // prüfe ob children ul vorhanden
    if($(this).children('ul')) {
        // zeige ul, welcher per CSS zuvor display: none; erhalten hat
        $(this).children('ul').show();
    }
});

Das ganze ist ungetestet und muss noch bzgl. ID und evtl. die ein oder andere Korrektur angepasst werden. Alles in allem sollte es dennoch laufen.
 

LRG

StyleIkone

AW: jQuery special slide down (in WP)

Hi,

also zum einen - warum setzt du parent/s ein, wenn du per click das children (ul-tag) ansprechen kannst?
sieht wie folgt aus:
Code:
$('#id > li').click(function() {
    // falls bereits irgendwo geöffnet - löschen
    $('#id > li').removeClass('active');
    // setze klasse für den aktuell angeklicken li-tag
    $(this).addClass('active');
    // nimm display: block aus ul-tags raus
    $('#id > li > ul').removeAttr('style');
    // prüfe ob children ul vorhanden
    if($(this).children('ul')) {
        // zeige ul, welcher per CSS zuvor display: none; erhalten hat
        $(this).children('ul').show();
    }
});
Das ganze ist ungetestet und muss noch bzgl. ID und evtl. die ein oder andere Korrektur angepasst werden. Alles in allem sollte es dennoch laufen.

ich komm leider kein zentimenter damit klar, sorry...bei mir tut sich da gar nichts mehr an slide effekt o.ä....hab #id gegen mein .current_page_item getauscht.

ich bin leider nicht ganz so bewandert in js/jQuery :(
 

saila

Moderatorle

AW: jQuery special slide down (in WP)

Du meinst aber nicht slider aus der UI von jQuery?

Ansonsten teste mal folgendes als Vorlage (html):
Code:
    <ul>
        <li>test
            <ul>
                <li>test 1</li>
                <li>test 1</li>
            </ul>
        </li>
        <li>
            test 2
            <ul>
                <li>t2</li>
                <li>t2</li>
            </ul>
        </li>
    </ul>

jQuery:
Code:
$(document).ready(function() {

    $('ul li').click( function() {
        $(this).addClass('actiev');
        
        $('ul > li > ul').hide('slow');
        
        if($(this).children('ul')) {
            $(this).children('ul').show('slow');
        }
    });
});

Wenn es das nicht ist, was du suchst, dann beschreibe genauer was du suchst.
 

LRG

StyleIkone

AW: jQuery special slide down (in WP)

da konnt ich nun schon was mit anfangen ;-)

hab mal die struktur nachgebaut die Wordpress mir ausgibt und das ist das ergebnis:



geplant hatte ich das schon mit dem slideDown() von JQuery...aber viel unterschied ist wohl vom effekt her nicht, ich weiß nicht wie aufwändig das mit JQuery und der slideDown() methode wäre ??

jetzt hat sich nur gleich das nächste problem aufgetan, WP gibt mir jeden Listenpunkt als <a> tag aus...sprich ich klicke 2009 und er läd mir die seite 2009 was den effekt zerstört...

wenn du mir dafür vll auch noch nen tip parad hast...ich such schon nach "link tag entfernen mit js" aber iwie scheint mir das nicht so einfach...der text soll ja stehen bleiben...nur der <a> tag bei eben paar bestimmten <li> tags soll weg...
bei den untersten soll er bleiben (also bei den namen der frauen) damit die galerien bei klick laden.

Vielen Dank schonmal bis hierher für deine hilfe!!!

EDIT: zu dem SlideDown(), hab eben einfach mal testhalber "hide" und "show" gegen "slideup" bzw. "slidedown" getauscht. Würde dann auch so klappen, wenn der <a> tag weg ist :D

EDIT2: Habs iwie hinbekommen, auch wenn er beim "verstecken" den slideup() nicht nimmt ?!...habs mal mit hide() gelöst und gut is...läuft jetzt mal so wie gewünscht, danke nochmal ;-)
 
Zuletzt bearbeitet:

saila

Moderatorle

AW: jQuery special slide down (in WP)

Hi,

ich versteh nicht ganz, was im Listenmenü so schlimm ist wenn da ein a-tag enthalten ist. Ist doch für ein Menü üblich ;)

Das ganze bzgl. für jQuery zerstört im Grunde nichts. Problem was sich ergibt, die Seite wird neu geladen - also die per Link aufgerufene Seite. Somit ist das Menü nicht über den Browser zu steuern, sondern wiederum von WP (php).

Wenn du html innerhalb html ändern möchtest, wäre das folgender Ansatz (anhängend an dem Beispiel von oben und innerhalb der gleichen funktion (jQuery):
Code:
var atagText = $(this).children('a').text();
$(this).children('a').remove();
$(this).text(atagText);

Was passiert: Aus dem li-tag wird das Kindelement angesprochen per children und daraus wird der Text (Linktext) herausgenommen und in einer Variablen gespeichert. Danach wird der a-tag gelöscht per remove und in den li-tag der vorhergehende Linktext wieder eingefügt.

Bzgl. dem remove müsstest du noch mal evtl. bei jQuery Doku nachlesen, falls es nicht korrekt funktioniert.
 

LRG

StyleIkone

AW: jQuery special slide down (in WP)

Code:
<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() {
        // die Unterseiten der Jahreszahlen anzeigen, denn im Portfolio wird gestartet
        $('ul li ul').show();
        $('ul li ul li ul').hide();
        // --------------------------------------------------------------------------------------
        // bei allen <a>-Tags, die mit '20' beginnen (ersten beiden Zahlen des Jahres)
        // das Attribute 'href' entfernen damit beim Klick die jeweilige Seite nicht geladen wird
        // --------------------------------------------------------------------------------------
        var links = document.getElementsByTagName('a');
        for (i = 0; i < links.length; i++) {
            if(links[i].title.substr(0,2) == '20') {
                links[i].removeAttribute('href');
                }
            }
        // ----------------------------------------------------
        // Funktion um ein Element anhand der "class" zu finden
        // notwendig um den Portfolio-Firs-Click abzufangen!
        // ----------------------------------------------------
        var allHTMLTags = new Array();
        function getElementByClass() {
            //Create Array of All HTML Tags
            var allHTMLTags=document.getElementsByTagName('li');
            //Loop through all tags using a for loop
            for (i=0; i<allHTMLTags.length; i++) {
                //Get all tags with the specified class name.
                if (allHTMLTags[i].className=='page_item page-item-20') {
                return true;    
                }
            }
        }
        // --------------------------------------------------------------------
        // Wenn "Kontakt" oder "Partner" geklickt wurde, Unterseiten verstecken
        // --------------------------------------------------------------------
        if(document.URL == 'http://netcurve.de/wp_mia/?page_id=21' || document.URL == 'http://netcurve.de/wp_mia/?page_id=22' ) {
            $('ul li ul').hide();
        }
        // ------------------------
        // First-Click auf die Navi
        // ------------------------
        $('ul li').click( function() {
            // Is es das Portfolio ?
            if(getElementByClass() == true) {
                // Wenn JA, dann nur eine Schicht drunter (Child) aufklappen
                $(this).addClass('active');
                // Die gewünschte Liste mit Unterpunkten anzeigen
                if($(this).children('ul')) {
                    $(this).children('ul').slideDown('slow');
                } 
            }
        });
        // -----------------------------------
        // Click auf die Ebenen mit Jahreszahl
        // -----------------------------------
        $('ul li ul li').click( function() {
            $(this).addClass('active');
            // Alle evtl. offenen Unterpunkte schließen
            $('ul > li > ul > li > ul').hide();
            // Die gewünschte Liste mit Unterpunkten anzeigen
            if($(this).children('ul')) {
                $(this).children('ul').slideDown('slow');
            }            
        });    
    });
</script>

ich hab da jetzt einfach mal mit meim Unwissen freestyle reingecodet...funktioniert auch soweit wie ichs will nur flackert das ganze noch wenn ich einen listenpunkt der untersten eben anklicke...der läd das wohl kurz nochmal bevor er dann den neuen content läd...

gibts denn ne möglichkeit, das ich mir merken kann welcher listenpunkt zuletzt angeklickt wurde und das ich mich nach laden des content wieder drauf positionieren kann..sprich die liste soweit aussliden lassen kann bis ich wieder da steh wo ich zuletzt geklickt hab ?

hier mal mein bisheriger "saustall"...effekt mit dem "flackern" sieht man da auch:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.158
Beiträge
2.581.881
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben