Доброго времени суток! Подскажите как сделать так, чтобы при нажатии на любой элемент из списка, выводился список, который содержится в нем.
$(document).ready(function() {
var height_sub_menu;
$(".sub-menu").click(function() {
height_sub_menu = $(".sub-menu").height();
console.log(height_sub_menu);
$(".sub_catalog").css("display", "block");
$(".sub_catalog").css("height", height_sub_menu);
});
});
.menu,
.menu li {
margin: 0;
padding: 0;
}
.menu {
position: absolute;
width: 1350px;
margin: 0 auto;
text-align: center;
background: #03658e;
}
.menu li {
display: inline-block;
text-align: center;
}
.menu a {
display: block;
padding: 5px 30px;
color: #fff;
font-size: 150%;
text-decoration: none;
}
.menu a:hover {
background: #8AB8CC;
}
.sub-menu {
display: block;
position: absolute;
width: 200px;
left: 70px;
padding: 0;
margin: 0;
list-style: none;
background: #03658e;
}
.sub-menu_1 {
display: none;
position: absolute;
width: 980px;
left: 200px;
background: #03658e;
}
.sub_catalog {
position: absolute;
display: none;
width: 1000px;
left: 275px;
padding: 0;
margin: 0;
list-style: none;
background: #03658e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<title>Тестовое задание</title>
<link rel="stylesheet" href="mmm.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="mmm.js"></script>
</head>
<body>
<ul class="menu">
<ul class="sub-menu">
<li><a href="#">Aaaaa</a>
<ul class="sub-menu_1">
<li><a href="#">Aaaaaa</a></li>
<li><a href="#">Aaaaaa</a></li>
<li><a href="#">Aaaaaa</a></li>
</ul>
</li>
<li><a href="#">Bbbbb</a></li>
<li><a href="#">Ccccc</a></li>
<li><a href="#">Ddddd</a></li>
<li><a href="#">Iiiii</a></li>
<li><a href="#">Fffff</a>
<ul class="sub-menu_1">
<li><a href="#">Н</a></li>
<li><a href="#">Х</a></li>
<li><a href="#">И</a></li>
</ul>
</li>
</ul>
</ul>
<div class="sub_catalog"></div>
</body>
</html>