Доброе утро, сложилась такая проблема, я не могу привязать нормальную анимацию к выподающему списку.
Вот ссылочка на
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")
}
});
