Функция для скрытых элементов
С помощью 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, время: 07:59. |