打开和关闭移动响应菜单

Question

I'm trying to build a mobile responsive "hamburger" menu. The html which I'm using for this is below...

 .menu_closed { color: red; } .menu_open { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $('span.menu_closed').click(function() { $('ul.menu').toggle('1000'); $(this).toggleClass("menu_open menu_closed"); }); </script> <span class="menu_closed">&#9776;</span> <ul class="menu" id="menu"> <ul class='section' id='section_1'> <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> <ul> <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> </li> <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> </li> <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> </li> <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> </li> </ul> </li> </ul> <ul class='section' id='section_2'> <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> <ul> <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> </li> </ul> </li> </ul> <ul class='section' id='section_5'> <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> <ul> <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> </li> <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> </li> <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> </li> </ul> </li> </ul> <ul class='section' id='section_4'> </ul> <div class='bot'> <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> <br /> <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> </p> </div> </ul> 

For some reason, it's not closing and opening as it should. I've no idea what's wrong.

I would be grateful if anybody could help.

Jack

Answer 1

$('span.menu_closed').click(function() { should reference a standard menu class, like .hamburger , not .menu_closed because if you change .menu_closed to .menu_open then .menu_closed no longer exists and you'll lose the click handler.

$(this).toggleClass("menu_open menu_closed"); should just toggle a class like open or closed . Technically what you were doing would work OK where the classname was .menu_open and you update this $.toggleClass() line to toggle the class .menu_closed , but then you end up with an element called span.menu_open.menu_closed . Better to name the menu something agnostic, then toggle whether it's open or not.

Also added cursor: pointer; to the menu to give an indication to the user that you can click the element.

Wrapped your jQuery code in $(function() {}); which will cause the page to wait to run the JS until the DOM is ready. This is needed since your JS comes before the rest of the HTML on the page.

And changed your click handler from using $.live() (deprecated) to $.on() . $.live() was deprecated in 1.7 and removed in 1.9 , and jQuery advises using $.on() now to attach event handlers.

 .hamburger { color: red; cursor: pointer; } .open { color: blue; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('.hamburger').on('click',function() { $('ul.menu').toggle(1000); $(this).toggleClass("open"); }); }); </script> <span class="hamburger">&#9776;</span> <ul class="menu" id="menu"> <ul class='section' id='section_1'> <li><span id='section_title_1' class='section_title'><a href='#' id='section_link_1'>Against the odds.</a></span> <ul> <li id='exhibit_1' class='exhibit_title'><a href="../against-the-odds/introduction"> &rarr; Introduction</a> </li> <li id='exhibit_2' class='exhibit_title'><a href='../against-the-odds/deriving-functions'> &rarr; Deriving functions</a> </li> <li id='exhibit_3' class='exhibit_title'><a href='../against-the-odds/exploiting-odds'> &rarr; Exploiting odds</a> </li> <li id='exhibit_4' class='exhibit_title'><a href='../against-the-odds/betting_history'> &rarr; Betting history</a> </li> </ul> </li> </ul> <ul class='section' id='section_2'> <li><span id='section_title_2' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_2'>Remembering everything.</a></span> <ul> <li id='exhibit_104' class='exhibit_title'><a href='#'>black swans</a> </li> </ul> </li> </ul> <ul class='section' id='section_5'> <li><span id='section_title_5' class='section_title'><a href='http://themathsproject.co.uk' id='section_link_5'>Running faster.</a></span> <ul> <li id='exhibit_107' class='exhibit_title'><a href='#'>possible areas to explore</a> </li> <li id='exhibit_108' class='exhibit_title'><a href='#'>developing the model</a> </li> <li id='exhibit_109' class='exhibit_title'><a href='#'>performance</a> </li> </ul> </li> </ul> <ul class='section' id='section_4'> </ul> <div class='bot'> <p><a href='https://www.twitter.com/themathsproject' target="_blank">twitter</a> <br /> <a href='https://www.facebook.com/themathsproject' target="_blank">facebook</a> </p> </div> </ul> 

Answer 2

hey man i tried your code it's working fine here is 

https://jsfiddle.net/L0vnd4ay/