Есть меню когда при щелчке на элемент списка открывается вложенный список, нужно сделать так что бы при щелчке на другой вложенный список, прошлый вложеный список который мы открыли сам закрывался. Допустим я кликаю на "Первобытные собиратели и охотники", а потом кликаю на "Первобытные земледельцы и скотоводы" и после этого "Первобытные собиратели и охотники" автоматически скрываются. И еще, как сделать что бы список раскрывался при наведении мыши?
$(document).ready(function() {
$("#menuCnt > ul > li > a").click(function() {
$(this).find("~ ul").stop().slideToggle("slov");
});
});
#menuCnt ul li {
list-style: none;
border-bottom: 1px solid #eaeaea;
border-radius: 10px;
}
#menuCnt ul li a {
display: block;
text-decoration: none;
color: #333;
padding: 10px;
border-radius: 10px;
}
#menuCnt > ul > li > ul {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuCnt">
<ul>
<li><a href="#" class="textbold">Первобытные собиратели и охотники</a>
<ul>
<li><a href="#">Древнейшие люди</a></li>
<li><a href="#">Родовые общины охотников и собирателей</a></li>
<li><a href="#"> Возникновение искусства и религиозных верований</a></li>
</ul>
</li>
<li><a href="#" class="textbold">Первобытные земледельцы и скотоводы</a>
<ul>
<li><a href="#">Возникновение земледелия и скотоводства</a></li>
<li><a href="#">Появление неравенства и знати</a></li>
</ul>
</li>
<li>
<a href="#"> Счет лет в истории</a>
</li>
</ul>
</div>