javascript - onclick open sub menu, on click close sub menu? - Stack Overflow

admin管理员组

文章数量:1406312

On this page / I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site /

This is my html for the menu so far:

<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-->

As you can see I only need it to work within one list item. I need help writing the Javascript for this.

So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.

On this page http://kimcolemanprojects./ I need to have a drop down menu that opens on click and closes again on click of same anchor. Like it works on this site http://angela-moore.co.uk/

This is my html for the menu so far:

<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-->

As you can see I only need it to work within one list item. I need help writing the Javascript for this.

So when on index page the user can see three links lighting + video, Photograms, About. When user clicks on lighting + video a sub menu opens beneath with more links. Then it will close again if the user clicks again on lighting + video. The same can happen with each of the initial three links on the index page.

• javascript
• drop-down-menu
• onclick
• dom-events

Share Improve this question Follow edited Sep 1, 2020 at 18:29 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 5, 2013 at 16:30 angelaangela 1,15344 gold badges1616 silver badges3434 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Quite Simple..

<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>

This will be your HTML container etc, under this you will need your javascript to control that hiding and changing!! You can add some styling also if you feel artistic!

<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>

This is a simple HTML Example and you can execute it how you like.

本文标签： javascriptonclick open sub menuon click close sub menuStack Overflow