onclick open sub-Menü, klicken Sie auf schließen, sub Menü?

Auf dieser Seite http://kimcolemanprojects.com/ brauche ich ein drop-down-Menü, das öffnet, klicken Sie auf und schließt wieder auf auf der gleichen Anker. Wie funktioniert es auf dieser Seite http://angela-moore.co.uk/

dies ist mein html-Code für das Menü so weit:

<div class="left" id="nav">
<ul id="menu">
<li id="light">
<a href="lighting_video.html">Lighting + Video</a>
   <ul style="display: none;">
     <li><a href="django_django.html">Django Django</a></li>
     <li><a href="suntrap.html">Suntrap</a></li>
  </ul>
</li>
<li id="photo">
<a href="photograms.html">Photograms</a>
</li>
<li id="about">
<a class="active" href="about.html">About</a>
</li></ul>
</div><!--end nav-->

Wie Sie sehen können, nur muss ich es an der Arbeit innerhalb einer Liste. Ich brauche Hilfe, schreiben von javascript für diese.

So, wenn auf der index-Seite, die der Benutzer sehen kann, drei links Beleuchtung + video, Fotogrammen, Über. Wenn der Benutzer klickt auf die Beleuchtung + video-ein sub-Menü öffnet sich neben mit mehr links. Dann wird es sich wieder schließen, wenn der Benutzer klickt erneut auf Beleuchtung + video. Das gleiche kann passieren, mit jedem der ersten drei links auf der index-Seite.

Vielen Dank für jede Hilfe.

Angela

InformationsquelleAutor angela | 2013-01-05
  1. 3

    Ganz Einfach.. 

    <script src="jquery.js"></script>
<div id="navigation">
<p><a href="#" id="toggle">Menu</a></p>
<ul id="menu">



    <li><a href="/#" class="book-campaigns">Menu 1</a><ul>
        <li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li><li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li>
    </ul></li>

    <li><a href="/#" class="book-campaigns">Menu 2</a><ul>
        <li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li><li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li>
    </ul></li>

            <li><a href="/#" class="book-campaigns">Menu 3</a><ul>
        <li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li><li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li>
    </ul></li>

            <li><a href="/#" class="book-campaigns">Menu 4</a><ul>
        <li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li><li><a href="#"  class="lol">lol</a></li><li><a href="#"  class="lol">lol2</a></li>
    </ul></li>

    Dies wird Ihre HTML-container etc, unter diese benötigen Sie, javascript zu Steuern, dass das verbergen und verändern!! Sie können fügen Sie einige styling-auch, wenn Sie das Gefühl Künstlerische! 

    <script>
var showMenuText = $('#toggle').text();
var hideMenuText = 'Close';

$('#navigation ul').hide();
$('#navigation ul a.active+ul').show();

hideMenu = function() {
    $('#navigation ul#menu').hide();
    $('#navigation').removeClass('open');
    $('#toggle').text(showMenuText);
}

$('#toggle').click(function(event){
    event.stopPropagation(); event.preventDefault();
    $('#navigation ul#menu').toggle();
    $('#navigation').toggleClass('open');
    var toggleText = $('#toggle').text();
    (toggleText == showMenuText) ? $(this).text(hideMenuText) : $(this).text(showMenuText);
});

$('ul#menu > li > a').click(function(event){
    $this = $(this);
    if( $this.hasClass('page') ) parent.location = $this.attr('href');
    if( $this.hasClass('home') ) { parent.location = '/'; }

    event.preventDefault(); event.stopPropagation();
    if( $this.hasClass('active') ) var justclosed = true;
    $('a.active').removeClass('active').next('ul').hide();
    if(!justclosed) $this.addClass('active').next('ul').show();
});

</script>

    Dies ist ein einfaches HTML-Beispiel und führen Sie es wie Sie möchten.

    • Auch um zu klären, laden Sie die Skripts Ende des render kann es zur Verbesserung der Leistung Ihrer Website, OBWOHL einige JS immer erforderlich, vor zu Rendern, so wählen Sie sorgfältig.
    InformationsquelleAutor Pogrindis
Schreibe einen Kommentar