Функция для скрытых элементов
С помощью toggle по клику появляется Раздел 1, но не получается пррисвоить ей функцию , которая по клику в Раздел 1 изменяла бы видимость подразделов.
Хочу что бы по клику по Разделам появлялись подразделы. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head><title>index.php</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/lib/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/lib/jquery-ui.min.js"></script> <script> $(document).ready(function () { $("#menu li:first").click(function () { $(".menu1").toggle(200); $("#menu2").click(function () { $("#menu2").toggle(200); }); }); }); </script> <style> *{ padding: 0; margin: 0; border: none; overflow:hidden } body { background: rgb(197, 197, 197); width: 100%; height: 100%; } li{ list-style:none } .menu1,.menu2{ display:none; } </style> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <ul id="menu"> <li><a href="#">МЕНЮ</a></li> <li> <a href="#" class="menu1">Раздел 1</a> <ul class="menu2"> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> </ul> </li> </ul> </body> </html> |
Nevrali,
строка 11 у вас будет навешивать клик за кликом ... может готовое взять коих на форуме 100500 http://javascript.ru/forum/project/3...tml#post231407 |
Готовое конечно проще, но разобраться самому в этом разумнее. Спасибо за направление
Я думаю, что функцию вызывать по имени нужно |
Nevrali,
:-? <!DOCTYPE HTML> <html> <head> <title>index.php</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function () { $("#menu li:first").click(function (event) {event.preventDefault(); $(this).next().toggle(200);} ); $(".menu1").click(function (event) {event.preventDefault(); $(this).next().toggle(200); } ); } ); </script> <style> *{ padding: 0; margin: 0; border: none; overflow:hidden } body { background: rgb(197, 197, 197); width: 100%; height: 100%; } li{ list-style:none } #menu > li:nth-child(n + 2),.menu2{ display:none; } </style> </head> <body> <ul id="menu"> <li><a href="#">МЕНЮ</a></li> <li> <a href="#" class="menu1">Раздел 1</a> <ul class="menu2"> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> <li><a href="#">Подраздел</a></li> </ul> </li> </ul> </body> </html> |
Часовой пояс GMT +3, время: 17:53. |