С помощью 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>