Показать сообщение отдельно
  #1 (permalink)  
Старый 26.08.2015, 10:23
Интересующийся
Отправить личное сообщение для solunski.d Посмотреть профиль Найти все сообщения от solunski.d
 
Регистрация: 19.08.2015
Сообщений: 24

Многоуровневое меню, не срабатывает правильно анимация
Доброе утро, сложилась такая проблема, я не могу привязать нормальную анимацию к выподающему списку.

Вот ссылочка на 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")
        }

    });

Последний раз редактировалось solunski.d, 26.08.2015 в 14:48.
Ответить с цитированием