Раскрывающееся меню, проверка на активную
Наваял вот такой код
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 срабатывало одно условие если нет то другое... а по любому срабатывает первое условие может подскажите? |
Сделал уже вот так.
$('.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> |
Класс active присваивается через php
но что-то все равно никак.. когда написал вот так вообще никак не реагирует |
IgorArhangel,
попробуйте без hover написать что вам нужно через mouseleave() и mouseenter() |
Сделал.. результат тот же..
ну то есть оно работает
$(".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);
});
};
Все равно не пашет. |
IgorArhangel,
непонятно что вы хотите получить от активного пункта |
IgorArhangel,
$(function() {
$(".left-menu ul.menu>li").mouseenter(function() {
if ($(this).is(".active")){};
else {};
}).mouseleave(function() {
if ($(this).is(".active")){};
else {};
})
});
|
ООО
Спасибо.. Именно то что нужно сделал вот так..
$(".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);};
});
|
Варианты hover
Цитата:
<!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>
|
| Часовой пояс GMT +3, время: 04:51. |