javascript - Extreamly simple HTML js code,but why doesn`t it work? -
i trying learn make simple quiz.so got script in stackoverflow.it works here http://jsfiddle.net/zy4gw/ ,but not when use ,here code
<html> <head> <title>learning how make quiz</title> <script type="text/javascript"> $(function(){ $('#q-and-a li a').each(function(){ $(this).click(function(){ $(this).siblings('div').slidetoggle(300); }); }); }); </script> </head> <body> <ul id="q-and-a"> <li><a>question one</a> <div>answer question one...</div> </li> <li><a>question two</a> <div>answer question two...</div> </li> </ul> <style> ul { margin: 0; padding: 0; } ul li { margin: 0; padding: 0; list-style: none; } ul li { color: blue; } ul li div { display: none; } </style> </body> </html>
why doesn`t run?
<!doctype html> <html> <head> <title>learning how make quiz</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> //you had not imported library required running jquery <script type="text/javascript"> $(document).ready((function(){ $('#q-and-a li a').click(function(e){ $(this).next('div').slidetoggle(300); //div child of li not sibling }); })); </script> </head> <body> <ul id="q-and-a"> <li><a >question one</a> <div>answer question one...</div> </li> <li><a >question two</a> <div>answer question two...</div> </li> </ul> <style> ul { margin: 0; padding: 0; } ul li { margin: 0; padding: 0; list-style: none; } ul li { color: blue; } ul li div { display: none; } </style> </body> </html>
your mistakes follows: 1) had not imported library required jquery 2) function using access div element div child element of li. accessing sibling of li.
3) no need of .each function access li separately
Comments
Post a Comment