Форум

ufaclub · #1 (**permalink**) 26.04.2015, 20:21

структура меню

<ul class="main-menu">

<li class="active">
<a class="selected" href="">Леса</a>
<ul class="main-menu">
<li><a href="">Леса клиновые</a></li>
<li><a href="">Леса рамные</a></li>
<li><a href="">Леса хомутовые и штыревые</a></li>
</ul>					
</li>
											
<li><a href="">Вышки-тур</a>
<ul class="main-menu">
<li><a  href="">Вышки-тур резервуарные</a></li>
</ul>
</li>

</ul>

сейчас 2 уровень вложенности скрыт вот так:

.main-menu li ul {display:none;}
.main-menu li:hover ul {display:block;}

Хочу сделать так чтобы видимостью управлял именно jq.

Только функция не ховер. А по другому.

При наведение на какой либо <li> внутри которого есть второй уровень - этот второй уровень становился видимый. и если мышку в сторону отвести то он не закрывался бы. А лишь только тогда бы закрывался когда курсор перейдет на другой <li> у которого есть вложенный <ul>

рони · #2 (**permalink**) 26.04.2015, 20:42

ufaclub,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">

.main-menu > li > ul {display:none;}


.main-menu > li.active > ul {display:block;}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var li = $(".main-menu").parent('li');
       li.mouseenter(function() {
         li.not(this).removeClass("active");
         $(this).addClass("active");
      });
});


  </script>
</head>

<body>
<ul class="main-menu">
<li class="active">
<a class="selected" href="">Леса</a>
<ul class="main-menu">
<li><a href="">Леса клиновые</a></li>
<li><a href="">Леса рамные</a></li>
<li><a href="">Леса хомутовые и штыревые</a></li>
</ul>
</li>
<li><a href="">Вышки-тур</a>
<ul class="main-menu">
<li><a  href="">Вышки-тур резервуарные</a></li>
</ul>
</li>
</ul>
</body>

</html>

ufaclub · #3 (**permalink**) 26.04.2015, 20:50

спасибо!

Форум

Справочник

Discord чат

Курсы javascript