Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.12.2014, 20:44
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 14.01.2013
Сообщений: 29

Раскрывающееся меню, проверка на активную
Наваял вот такой код
if ( $('.left-menu ul.menu>li').hasClass("active") && $('.left-menu ul.menu>li').parent().find('ul').length){
					$('.left-menu ul.menu li').hover(
					function () {
						$('ul', this).slideDown(500);  
					},
					function () {
						$('ul', this).slideUp(500);
					}
				);
				}
				else {
					$('.left-menu ul.menu li ul').css("display","block");
				}

Нужно чтоб если li имеет класс active срабатывало одно условие если нет то другое... а по любому срабатывает первое условие может подскажите?
Ответить с цитированием
  #2 (permalink)  
Старый 23.12.2014, 21:28
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 14.01.2013
Сообщений: 29

Сделал уже вот так.
$('.left-menu ul.menu>li').hover(function() {
					if($(this).hasClass("active")){
						$('.left-menu ul.menu li ul').css("display","block");
					}
					else{
						function () { $('ul', this).slideDown(500);  },
						function () { $('ul', this).slideUp(500); }
					}
				} );


Разметка вот таккая:
<div class="left-menu">			
<ul class="menu">
<li class="item-108 deeper parent">
<a href="/lechebnaya-kosmetika" >Лечебная косметика</a>
<ul>
<li class="item-109"><a href="/lechebnaya-kosmetika/chernika" >Черника лютеин форте</a></li>
<li class="item-110"><a href="/lechebnaya-kosmetika/pitanie" >Питание и стимулирование мышц, суставов и позво</a></li>
</ul>
</li>
<li class="item-111 current active"><a href="/bad" >Бад</a></li></ul>
</div>
Ответить с цитированием
  #3 (permalink)  
Старый 23.12.2014, 21:30
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 14.01.2013
Сообщений: 29

Класс active присваивается через php

но что-то все равно никак..
когда написал вот так вообще никак не реагирует
Ответить с цитированием
  #4 (permalink)  
Старый 23.12.2014, 21:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

IgorArhangel,
попробуйте без hover написать что вам нужно через mouseleave() и mouseenter()
Ответить с цитированием
  #5 (permalink)  
Старый 24.12.2014, 19:40
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 14.01.2013
Сообщений: 29

Сделал.. результат тот же..
ну то есть оно работает
$(".left-menu ul.menu>li").mouseenter(function(){
					$('ul', this).slideDown(500); 
				}).mouseleave(function(){
					$('ul', this).slideUp(500);
				});

Но как прописать условие чтоб активный пункт при наведении и отведении, меню начинает закрываться.
То есть прописать условие, чтоб применять данный метод только для элементов без класса .active

Обернул в такое условие:
if ( !$(".left-menu ul.menu>li").hasClass("active") ) {
				$(".left-menu ul.menu>li").mouseenter(function(){
					$('ul', this).slideDown(500); 
				}).mouseleave(function(){
					$('ul', this).slideUp(500);
				});
				};


Все равно не пашет.
Ответить с цитированием
  #6 (permalink)  
Старый 24.12.2014, 19:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

IgorArhangel,
непонятно что вы хотите получить от активного пункта
Ответить с цитированием
  #7 (permalink)  
Старый 24.12.2014, 19:59
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

IgorArhangel,
$(function() {
    $(".left-menu ul.menu>li").mouseenter(function() {
        if ($(this).is(".active")){};
        else {};
    }).mouseleave(function() {
        if ($(this).is(".active")){};
        else {};
    })
});
Ответить с цитированием
  #8 (permalink)  
Старый 25.12.2014, 19:48
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 14.01.2013
Сообщений: 29

ООО
Спасибо.. Именно то что нужно

сделал вот так..
$(".left-menu ul.menu>li").mouseenter(function(){
					if (!$(this).is(".active")){ $('ul', this).slideDown(500);}; 
				}).mouseleave(function(){
					if (!$(this).is(".active")){$('ul', this).slideUp(500);};
				});
Ответить с цитированием
  #9 (permalink)  
Старый 25.12.2014, 20:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Варианты hover
Сообщение от IgorArhangel
(!$(this).is(".active")
тогда зачем это ?
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        li ul {
            display: none;
        }
        .active {
            background-color: rgb(0, 255, 255);
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(".left-menu ul.menu li.active").mouseenter(function() {
                $('ul', this).stop(true, true).slideDown(500)
            }).mouseleave(function() {
                $('ul', this).stop(true, true).slideUp(500)
            });

        });
    </script>
</head>

<body>
    <div class="left-menu">
        <ul class="menu">
            <li class="item-108 deeper parent">
                <a href="/lechebnaya-kosmetika">Лечебная косметика</a>
                <ul>
                    <li class="item-109"><a href="/lechebnaya-kosmetika/chernika">Черника лютеин форте</a>
                    </li>
                    <li class="item-110"><a href="/lechebnaya-kosmetika/pitanie">Питание и стимулирование мышц, суставов и позво</a>
                    </li>
                </ul>
            </li>
            <li class="item-111 current active"><a href="/bad">Бад</a>
                <ul>
                    <li>test</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

можно ещё так
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        li ul {
            display: none;
        }
        .active{
          background-color: rgb(0, 255, 255);
        }

    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(".left-menu ul.menu").on("mouseenter mouseleave", "li.active",
                function(event) {
                    $('ul', this).stop(true, true)[event.type == "mouseenter" ? "slideDown" : "slideUp"](500)
                })
        });
    </script>
</head>

<body>
    <div class="left-menu">
        <ul class="menu">
            <li class="item-108 deeper parent">
                <a href="/lechebnaya-kosmetika">Лечебная косметика</a>
                <ul>
                    <li class="item-109"><a href="/lechebnaya-kosmetika/chernika">Черника лютеин форте</a>
                    </li>
                    <li class="item-110"><a href="/lechebnaya-kosmetika/pitanie">Питание и стимулирование мышц, суставов и позво</a>
                    </li>
                </ul>
            </li>
            <li class="item-111 current active"><a href="/bad">Бад</a>
                <ul>
                    <li>test</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>


или вот так
<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        li ul {
            display: none;
        }
        .active {
            background-color: rgb(0, 255, 255);
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(".left-menu ul.menu").on({
                "mouseenter": function(event) {
                    $('ul', this).stop(true, true).slideDown(500)
                },
                "mouseleave": function(event) {
                    $('ul', this).stop(true, true).slideUp(500)
                }
            }, "li.active")
        });
    </script>
</head>

<body>
    <div class="left-menu">
        <ul class="menu">
            <li class="item-108 deeper parent">
                <a href="/lechebnaya-kosmetika">Лечебная косметика</a>
                <ul>
                    <li class="item-109"><a href="/lechebnaya-kosmetika/chernika">Черника лютеин форте</a>
                    </li>
                    <li class="item-110"><a href="/lechebnaya-kosmetika/pitanie">Питание и стимулирование мышц, суставов и позво</a>
                    </li>
                </ul>
            </li>
            <li class="item-111 current active"><a href="/bad">Бад</a>
                <ul>
                    <li>test</li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

Последний раз редактировалось рони, 25.12.2014 в 20:42.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выделение активных пунктов многоуровневого меню на jQuery Letto Элементы интерфейса 2 04.12.2013 15:30
плавно раскрывающееся многоуровневое меню land15 Элементы интерфейса 0 02.07.2012 14:01
Проблема с аккордионом и меню Tie ExtJS 3 01.09.2011 14:36
меню раскрывающееся по клику и закрывающееся при убирании мыши whizzo Элементы интерфейса 6 22.08.2010 16:12
Раскрывающееся меню, как переставить на другую сторону? Resager Events/DOM/Window 8 22.08.2008 21:56