Форум

Mrs.Haneki · #1 (**permalink**) 11.02.2015, 16:35

Добрый день!

такая проблемка(
есть меню:

<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"); 
	});  
});

это не работает. помогите пожалуйста разобраться

рони · #2 (**permalink**) 11.02.2015, 16:42

Mrs.Haneki,
обойти циклом все .pod-menu и поставить клик на предыдущий элемент с отменой действия по умолчанию

Mrs.Haneki · #3 (**permalink**) 11.02.2015, 16:44

а если не сложно, можно написать?
на словах одно, а на деле я буду очень долго делать

рони · #4 (**permalink**) 11.02.2015, 17:16

Mrs.Haneki,

$(function() {
    $(".pod-menu").each(function(indx, el) {
        $(this).prev().click(function(event) {
            event.preventDefault();
            $(el).toggleClass("left")
        })
    })
});

Mrs.Haneki · #5 (**permalink**) 12.02.2015, 10:20

не работает((

рони · #6 (**permalink**) 12.02.2015, 10:48

Сообщение от Mrs.Haneki

не работает((

ой а здесь работает ))) по всем ссылкам кроме галереи будет переход

<!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>

Форум

Справочник

Discord чат

Курсы javascript