Раскрывающееся меню
Здравствуйте.
помогите решить делему есть меню
<ul class="menu-sidebar">
<li class="level-1">
<i class="icon-plus"></i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2"></li>
<li class="level-2"></li>
</ul>
</li>
<li class="level-1">
<i class="icon-plus"></i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2"></li>
<li class="level-2"></li>
</ul>
</li><li class="level-1">
<i class="icon-plus"></i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2"></li>
<li class="level-2"></li>
</ul>
</li>
</ul>
необходимо что бы при нажатии именно на icon-plus происходило раскрытие списка, начал было делать так
jQuery(document).ready(function($){
$(".menu-sidebar ul.level-2:first").addClass("active");
$(".menu-sidebar ul.level-2:not(:first)").hide();
$(".menu-sidebar .level-1 i").on("click", function() {
$(this).slideToggle("slow")
.siblings(".menu-sidebar ul.level-2:visible").slideUp("slow");
});
});
но ни как не получается обратиться к элементу ul.level-2 именно нужного родителя |
Fedul,
ваш номер 217 ... :lol: вы тока не паникуйте. |
информативно)))
|
открывашка для меню 217
Fedul,
и так открывашка для меню 217 предыдущие варианты смотреть в поиске по форуму рекомендую это http://javascript.ru/forum/project/3...na-jquery.html
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.icon-plus {
cursor: pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var ul = $(".menu-sidebar ul.level-2");
ul.hide();
$(".menu-sidebar").on("click", ".icon-plus", function() {
var sub = $(this).nextAll("ul")
sub.slideToggle("slow")
ul.not(sub).slideUp("slow");
});
ul.first().show()
});
</script>
</head>
<body> <ul class="menu-sidebar">
<li class="level-1">
<i class="icon-plus">+</i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2">1</li>
<li class="level-2">2</li>
</ul>
</li>
<li class="level-1">
<i class="icon-plus">+</i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2">1</li>
<li class="level-2">2</li>
</ul>
</li><li class="level-1">
<i class="icon-plus">+</i>
<a class="level-1" href="/.../..."></a>
<ul class="level-2 active">
<li class="level-2">1</li>
<li class="level-2">2</li>
</ul>
</li>
</ul>
</body>
</html>
|
понял, исправлюсь)
по теме, спасибо! отлично работает. |
| Часовой пояс GMT +3, время: 20:40. |