Многоуровневое меню, не срабатывает правильно анимация
Доброе утро, сложилась такая проблема, я не могу привязать нормальную анимацию к выподающему списку.
Вот ссылочка на JSFiddle В коде JS щелкая на кнопку DropDown 1 выводиться вложенный список, щелкнув на DropDown 2 выводиться еще список, через функцию slideToggle. Но при щелчке на Dropdown 2 выкатывается сама конпка и вложенный список в нее, как исправить? Если не понятно о чем я говорю, то зайдите на ссылку где я выложил полный исходник, щелкните на кнопку Dropdown 1, затем Dropdown 2 :( Код HTML <ul class="nav"> <li class="button-dropdown"><!-- Первый уровень --> <a href="javascript:void(0)" class="dropdown-toggle">Dropdown 1 <span>▼</span></a> <ul class="dropdown-menu"> <li> <a href="#">Drop Item 1</a> </li> <li> <a href="#">Drop Item 2</a> </li> <li class="button-dropdown"><!-- Второй уровень --> <a href="javascript:void(0)" class="dropdown-toggle">Dropdown 2 <span>▼</span></a> <ul class="dropdown-menu"> <li> <a href="#">asdf</a> </li> </ul> </li> </ul> </li> </ul> Полный код JS
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
// Тут проблема, slideToggle(300).
e(this).parents(".button-dropdown").children(".dropdown-menu").slideToggle(300).parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
Проблемный участок кода
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
// ***************************************************** Тут проблема, slideToggle(300).
e(this).parents(".button-dropdown").children(".dropdown-menu").slideToggle(300).parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
|
Неужели ни кто не знает :(
|
Вы опубликовали очень много кода.
Пожалуйста, локализуйте проблему! Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно. И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему. Спасибо. P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting |
solunski.d,
Напишите проще что вам нужно. |
Вот посмотрите, потятно я теперь изложил или нет)
|
solunski.d,
попробуйте вместо parents использовать closest |
closet он закрывает
|
solunski.d,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
jQuery(function() {
function e(a, c) {
var b = c ? ":hidden:first" : ":visible:last",
d = c ? "fadeIn" : "fadeOut",
b = a.stop().filter(b);
b.length && b.delay(100)[d](500, function() {
e(a, c)
})
}
$(".dropdown-menu").each(function(a, c) {
var b = $("> li", c);
b.hide();
var d = $(this).prev(),
f = $(this).parent();
d.click(function(a) {
a.preventDefault();
f.siblings().find("a.active").click();
d.toggleClass("active");
e(b, d.is(".active"))
})
});
$("html").click(function(a) {
$(a.target).closest(".dropdown-menu,.dropdown-toggle").length || $(".dropdown-toggle.active").click()
})
});
</script>
</head>
<body> <ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
премного благодарен, большое спасибо!
|
премного благодарен, большое спасибо!
|
| Часовой пояс GMT +3, время: 14:05. |