<div class="services-content-text-navbar" id="dropdown">
<ul class="services-content-text-navbar_menu">
<li class="header-menu">
<a href="#">Гражданские дела</a>
<ul>
<li>Симейные</li>
<li>Жилищные</li>
<li>Земельные</li>
<li>Трудовые</li>
<li>Страховые</li>
<li>Наследственные</li>
<li>Авторские</li>
</ul>
</li>
<li class="header-menu">
<a href="#">Гражданские дела</a>
<ul>
<li>Симейные</li>
<li>Жилищные</li>
<li>Земельные</li>
<li>Трудовые</li>
<li>Страховые</li>
<li>Наследственные</li>
<li>Авторские</li>
</ul>
</li>
</ul>
</div>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
.services-content-text-navbar {
position: relative;
}
.services-content-text-navbar > .services-content-text-navbar_menu > li > ul{
list-style-type: disc;
padding-left: 20px;
overflow: hidden;
height: 0;
}
$(document).ready(function() {
$(".header-menu > a").click(function() {
$.each($(".header-menu > ul"), function(i, d){
if($(d).css('height') != '0px')
{
//Сворачиваем все открытые
$(d).animate({ height: 0 });
}
});
var ul = $(this).next(),
clone = ul
.clone()
.css({ height: "auto" })
.appendTo(".services-content-text-navbar"),
height = ul.css("height") === "0px" ? ul[0].scrollHeight + "px" : "0px";
clone.remove();
ul.animate({ height: height });
return false;
});
$(".services-content-text-navbar > ul > li > a").click(function() {
$(
".services-content-text-navbar > ul > li > a, .header-menu a"
).removeClass("active");
$(this).addClass("active");
}),
$(".header-menu ul li a").click(function() {
$(".header-menu ul li a").removeClass("active");
$(this).addClass("active");
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.