Jquery - dropdown-Menü klicken Sie auf

Ich bin relativ neu in jquery und ich bin der Suche nach Hilfe. Das Ziel ist ein Klick auf ein Listenelement angebracht, um eine ul-und haben es angezeigt, während alle anderen Elemente der Liste verschwinden. Nur die aktive Partition ist sichtbar

Das Problem, das ich habe ist, dass wenn ich auf einen anderen Punkt der Liste der aktiven verschwindet man (wie vorgesehen), aber es nicht zeigen die andere, es bleibt verborgen. Ich bin auf der Suche nach einem Weg, um zu enthüllen die Liste, beim verstecken der Menschen, die in-aktiv.

Hochgeladen habe ich mein problem: http://jsfiddle.net/CbU4d/

html:

<div id="secondary-nav"><!--secondary-nav-->    
    <ul>
        <li><a href="#.html">Current Article</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
            </ul>
        </li>
        <li class="active"><a href="#.html">Past Articles</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
                <li><a href="#.html">Example 2</a></li>
                <li><a href="#.html">Example 3</a></li>
            </ul>
        </li>
    </ul>   
</div><!--/secondary-nav-->

css:

#secondary-nav {
    float:left;
    height:auto;
    width:23%; /*210px*/
    border-right:2px solid #000;
    position:relative;
}

/*heading styles*/
#secondary-nav ul li {
    padding: 0 10px;
    list-style-type: none;
}

#secondary-nav ul li a {
    font-family:TrajanPro;
    font-size:1em;
    line-height: 32px;
    color:#000;
}

/*links*/
#secondary-nav ul ul li a {
    display: block;
    font-family:TrajanPro;
    font-size:0.9em;
    line-height: 27px;
    text-decoration: none;
    color:#000;
    transition: all 0.15s;
}

#secondary-nav ul li a:hover {
    display:block;
    color:#af2931;
    text-decoration:underline;
}

#secondary-nav ul ul {
    display: none;
}

#secondary-nav li.active ul {
    display: block;
}
/css

mit jquery 1.7.1 

$(document).ready(function(){
    $("#secondary-nav ul").click(function(){
        //slide up all the link lists
        $("#secondary-nav ul ul").slideUp();
        //slide down the link list below the h3 clicked - only if its closed
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
})
InformationsquelleAutor user3345367 | 2014-02-24
  1. 2

    Versuchen mit

    $("#secondary-nav ul ul").slideToggle();

    Demo

    InformationsquelleAutor Prashobh
  2. -1

    Ich es geschafft habe (glaube ich) mit zwei änderungen:

    1. Ändern Sie den Wahlschalter auf line 2 zu diesem:

      "#secondary-nav ul li"

      Dies bedeutet, dass das Ereignis wird an die Liste Element, das Sie klicken, nicht die gesamte Liste.

    2. Entfernen Sie die if-Anweisung in Zeile 6. Da wir verstecken alle der zweiten Ebene uls in die Vorherige Zeile, die wir nicht brauchen, zu prüfen, ob es sichtbar ist; wir wissen es nicht.

    3. Ändern Sie Zeile 6 zu diesem:

      $(this).children('ul').slideDown();

      Dies ist, weil die ul Sie wollen sich entfalten, ist ein Kind der li klicken Sie, keine Geschwister.

    Hier ist meine Feste jsFiddle.

    Edit: Wenn Sie wollen, um ihn zu stoppen, verstecken und wieder anzeigen, wenn Sie auf die eine, die ist bereits ausgebaut, nur chuck diese an der Spitze der handler:

    if ($(this).children('ul').is(':visible')){
    return
}
    InformationsquelleAutor Leigh Brenecki
Schreibe einen Kommentar