javascript - JQuery basic questions -


i'm making dropdown menu using code this site. provides jquery code. presume added html file, before closing body tag. i've test in browser on computer, doesn't work – hamburger icon isn't clickable

i've created js fiddle here http://jsfiddle.net/2jp93xo5/

this html file

    <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, initial-scale=1">      <link rel=stylesheet href="css/master.css">  </head>  <body>             <div class="mobile-nav">                 <div class="menu-btn" id="menu-btn">                     <div></div>                     <span></span>                     <span></span>                     <span></span>                 </div>                  <div class="responsive-menu">                     <ul>                         <li><a href="index.html">home</a></li>                         <li><a href="about-us.html">about</a></li>                         <li><a href="our-services.html">services</a></li>                         <li><a href="our-services.html">faqs</a></li>                         <li><a href="our-services.html">work</a></li>                         <li><a href="contact-us.html">contact</a></li>                     </ul>                 </div>             </div>     <script type="text/javascript">         jquery(function($){             $( '.menu-btn' ).click(function(){                 $('.responsive-menu').addclass('expand')                 $('.menu-btn').addclass('btn-none')             })               $( '.close-btn' ).click(function(){                 $('.responsive-menu').removeclass('expand')                 $('.menu-btn').removeclass('btn-none')             })         })     </script>      <script type="text/javascript">         jquery(function($){                  $( '.menu-btn' ).click(function(){                  $('.responsive-menu').toggleclass('expand')                  })             })     </script>  </body> </html> 

when use functions external library, such jquery, need tell browser load functions. if did copy , paste code linked article, "not working" expected behavior because code have unfulfilled dependency.

references external javascript libraries usually added html files using script tags.

html script element () used embed or reference executable script within html or xhtml document.

script tags like:

<script src="path/file.js"></script> 

if want use function referenced in script tag script tag needs appear before call function. it's worth noting script tags 1 of mechanisms can used reference external dependencies, although simplest , 1 should worry now.

you can run jquery locally or on server. popular choice use cdn-hosted jquery reference, because (a) cached clients; , (b) reduces load on server. can reference local file local server. or, if have internet connection available local environment can plugin script tag reference cdn-hosted jquery , include above other javascript code. might like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 

a way test out pieces of code in article cited sites jsfiddle, provide online execution environment , allows code-free options including dependencies , other configuration options.

update

i took @ fiddle. javascript malformed , referenced non-existent elements. cleaned , moved reference jquery load ondomready via framework & extensions tab on top left. menu expands , contracts at: http://jsfiddle.net/2jp93xo5/2/ . based on initial version, suggest reviewing javascript syntax basic language constructs. make lot easier understand what's wrong code when have clear picture of valid code looks like. also, clear: script tags html elements. not javascript construct. used within html document reference external javascript documents, invalid javascript syntax.


Comments

Popular posts from this blog

python - No exponential form of the z-axis in matplotlib-3D-plots -

php - Best Light server (Linux + Web server + Database) for Raspberry Pi -

c# - "Newtonsoft.Json.JsonSerializationException unable to find constructor to use for types" error when deserializing class -