Ich habe ein Menü für meine Website erstellt, das Sie hier finden:

http://jsfiddle.net/nq9Nt/9/

Wenn Sie im Menü auf eine Kategorie klicken, wird diese Kategorie in meiner Hauptnavigation geöffnet.

Ist etwas widersprüchlich oder habe ich mein Javascript an der falschen Stelle platziert?

Ich möchte in der Lage sein, auf eine Kategorie zu klicken und die Unterkategorien anzuzeigen, aber es funktioniert einfach nicht. Gibt es auch eine Möglichkeit, die Kategorie offen zu halten, auf die Sie nach dem Seitenwechsel geklickt haben?

Vielen Dank

<ul class="nav">
<li><a href="#">Category 1</a>

</li>
<li class="drop"><a href="#">Category 2</a>

    <ul id="sub1">
        <li><a href="#">Item</a>

        </li>
        <li><a href="#">Item</a>

        </li>
    </ul>
</li>
<li class="drop"><a href="#">Category 3</a>

    <ul id="sub1">
        <li><a href="#">Sticker</a>

        </li>
        <li><a href="#">Sticker</a>

        </li>
    </ul>
</li>
<li><a href="#">Category 4</a>

    <ul id="sub1">
        <li><a href="#"> Mural</a>

        </li>
        <li><a href="#">Mural</a>

        </li>
    </ul>
</li>
         $(".drop")
         .on('click', function () {
         $(this).find('ul').toggle();
          })
0
Dnamixup 4 Dez. 2013 im 15:50

3 Antworten

Beste Antwort

Zumindest bei jsfriddle-Animationen funktioniert dies tatsächlich. Wenn Sie die href Ihrer Anker von '#' durch eine echte URL ersetzen, werden Sie auf eine andere Seite weitergeleitet. Stellen Sie daher zunächst sicher, dass Sie die jquery-Bibliothek im Kopf des Dokuments angehängt haben (seit Sie Verwenden Sie es in Ihrem Skript. Verschieben Sie dann Ihr Skript an den unteren Rand der Seite, bevor das Tag 'body' geschlossen wird.

Informationen zum Beibehalten des Status der geöffneten Kategorien nach dem Aktualisieren - normalerweise wird er auf der Serverseite erstellt, während eine Vorlage generiert wird, indem dem aktuellen Link eine Klasse hinzugefügt wird, z. B. "aktiv", und dann mithilfe von CSS die entsprechende Kategorie (oder eine Hierarchie von Kategorien) verwendet wird Zum Öffnen setzen (z. B. li.active ul {display: block;}). Nun, tatsächlich könnten Sie den gleichen Trick machen - verwenden Sie js, um die aktuelle URL mithilfe des Wertes von window.location.pathname herauszufinden, sie mit einem href-Wert Ihrer Navigationslinks abzugleichen und dem gefundenen Element dann die Klasse 'active' zuzuweisen ( oder sein Elternteil, es liegt an Ihrem CSS)

0
Zippp 4 Dez. 2013 im 12:10

Hier das Beispiel,

jsbin

Sie haben das anchor href mit # angegeben, damit die Seite neu geladen wird. Und auch du hast die onclick Methode angegeben, aber sie ist nicht da.

0
dhana 4 Dez. 2013 im 12:01

Sie können li in der 4. Kategorie eine Klasse drop hinzufügen, damit sie wie andere funktioniert. Und entfernen Sie das onclick, wenn Sie es nicht verwenden möchten.

http://jsfiddle.net/nq9Nt/10/

0
paka 4 Dez. 2013 im 11:56