Форум

IgorArhangel · #1 (**permalink**) 23.12.2014, 20:44

Наваял вот такой код

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 срабатывало одно условие если нет то другое... а по любому срабатывает первое условие может подскажите?

IgorArhangel · #2 (**permalink**) 23.12.2014, 21:28

Сделал уже вот так.

$('.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>

IgorArhangel · #3 (**permalink**) 23.12.2014, 21:30

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

но что-то все равно никак..
когда написал вот так вообще никак не реагирует

рони · #4 (**permalink**) 23.12.2014, 21:37

IgorArhangel,
попробуйте без hover написать что вам нужно через mouseleave() и mouseenter()

IgorArhangel · #5 (**permalink**) 24.12.2014, 19:40

Сделал.. результат тот же..
ну то есть оно работает

$(".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

IgorArhangel,
непонятно что вы хотите получить от активного пункта

рони · #7 (**permalink**) 24.12.2014, 19:59

IgorArhangel,

$(function() {
    $(".left-menu ul.menu>li").mouseenter(function() {
        if ($(this).is(".active")){};
        else {};
    }).mouseleave(function() {
        if ($(this).is(".active")){};
        else {};
    })
});

IgorArhangel · #8 (**permalink**) 25.12.2014, 19:48

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

сделал вот так..

$(".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

Сообщение от 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>

Форум

Справочник

Discord чат

Курсы javascript