Проверка вложенного меню
Добрый день!
такая проблемка( есть меню: <div class="side-menu" <ul> <li class="navigation-item"><a href="index.html">Главная</a></li> <li class="navigation-item"><a href="index.html">О компании</a></li> <li class="navigation-item"><a href="index.html">Галерея</a> <div class="pod-menu"> <ul> <li><a href="/index/punkt1/">Подменю 1</a></li> <li><a href="/index/punkt2/">Подменю 1</a></li> <li><a href="/index/punkt2/">Подменю 1</a></li> </ul> </div> </li> </ul> </div> Под меню class pod-menu скрыт. надо сделать проверку. Если при нажатии на li.navigation-item есть подменю, то оно выезжает. Если его нет, то переход по ссылке. Так же надо учесть, что дети li тоже должны переходить по ссылке при нажатии. есть чтото типо этого:
$(document).ready(function() {
$('.navigation-item').click(function() {
$(this).find('.pod-menu').toggleClass("left");
});
});
это не работает. помогите пожалуйста разобраться |
Mrs.Haneki,
обойти циклом все .pod-menu и поставить клик на предыдущий элемент с отменой действия по умолчанию |
а если не сложно, можно написать?
на словах одно, а на деле я буду очень долго делать |
Mrs.Haneki,
$(function() {
$(".pod-menu").each(function(indx, el) {
$(this).prev().click(function(event) {
event.preventDefault();
$(el).toggleClass("left")
})
})
});
|
не работает((
|
Цитата:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.pod-menu.left {
left: 0px;
}
.pod-menu{
position: absolute;
left: -500px;
transition: 0.8s;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$(".pod-menu").each(function(indx, el) {
$(this).prev().click(function(event) {
event.preventDefault();
$(el).toggleClass("left")
})
})
});
</script>
</head>
<body>
<div class="side-menu">
<ul>
<li class="navigation-item"><a href="index.html">Главная</a></li>
<li class="navigation-item"><a href="index.html">О компании</a></li>
<li class="navigation-item"><a href="index.html">Галерея</a>
<div class="pod-menu">
<ul>
<li><a href="/index/punkt1/">Подменю 1</a></li>
<li><a href="/index/punkt2/">Подменю 1</a></li>
<li><a href="/index/punkt2/">Подменю 1</a></li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 01:39. |