Ожидание закрытия

293

26 января 2017, 01:14

Как заставить элемент списка в котором есть менять фоновый цвет, после того как подменю исчезло? https://jsfiddle.net/b5uma4re/13/ Сейчас если навести и убирать указатель на дочерний элемент подменю, то фоновый цвет родительского элемента тоже пропадает. Нужно чтобы он пропадал после скрытия дочернего подменю.

$(document).ready(function(){ 
  
    $('.w1').hover( 
        function(){ 
        $(this).find('.q1').stop(true, true).delay(500).slideDown(); 
    }, 
    function(){ 
        $(this).find('.q1').stop(true, true).delay(500).slideUp(); 
    }); 
});

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
} 
.cont{ 
    font-size: 0; 
    border: 1px black solid; 
} 
a{ 
    text-decoration: none; 
    line-height: 40px; 
    padding: 0 20px; 
} 
.q1{ 
    position: absolute; 
    border: 1px black solid; 
    width: 165px; 
    display: none; 
} 
.q1 li{ 
    border-top: 1px gray solid; 
    display: block; 
} 
.w1{ 
    font-size: 16px; 
    border-left: 1px black solid; 
    display: inline-block; 
    position: relative; 
} 
.w2{ 
    position: relative; 
} 
.w3{ 
    position: relative; 
} 
.q2, .q3{ 
    top: 0; 
    left: 100%; 
    position: absolute; 
    border: 1px black solid; 
    width: 210px; 
    display: none; 
} 
li:hover{ 
    background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="cont"> 
     <li class="w1"><a href="#">Домой</a></li><!-----------------------> 
     <li class="w1"><a href="#">О нас +</a><!-----------------------> 
         <ul class="q1 fir"><li><a href="#">Наша история</a></li> 
             <li><a href="#">Как нас найти</a></li> 
             <li><a href="#">Час работы</a></li> 
         </ul></li><!-----------------------> 
     <li class="w1"><a href="#">Наши товары +</a> 
         <ul class="q1"> 
            <li class="w2"><a href="#">+ Штуковины</a> 
                <ul class="q2"> 
                <li><a href="#">Простая штуковина</a></li> 
                <li><a href="#">Стандартная штуковина</a></li> 
                <li><a href="#">Продвинутая штуковина</a></li> 
                </ul></li> 
            <li class="w2"><a href="#">+ Гаджеты</a> 
                <ul class="q2"> 
                <li><a href="#">Простой гаджет</a></li> 
                <li><a href="#">Стандартный гаджет</a></li> 
                <li class="w3"><a href="#">+ Продвинутый гаджет</a> 
                    <ul class="q3"> 
                     <li><a href="#">Продвинутый гаджет A</a></li> 
                     <li><a href="#">Продвинутый гаджет Б</a></li>    
                    </ul></li> 
                </ul></li> 
            <li><a href="#">Машини времени</a></li>  
         </ul></li> 
 </ul>

Answer 1

К сожалению я не совсем понял, что вы хотите.

Как вам мой пример менюшки?

ul { 
  padding: 0; 
} 
.menu { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  position: relative; 
} 
 
.menu > li { 
  display: block; 
  padding: 20px 10px; 
  border: 1px solid black; 
  text-align:center; 
  cursor: pointer; 
} 
 
.menu > li:hover { 
  background-color: #022; 
  color: white; 
} 
 
.submenu { 
  display: block; 
  position: absolute; 
  list-style: none; 
  top: 100%; 
  padding: 20px 0px; 
  border: 1px solid black; 
  background-color: #022; 
  color: white; 
  transform: translateX(-10px); 
  opacity: 0; 
  transition: opacity 0.3s; 
  pointer-events: none; 
} 
 
.menu > li:hover .submenu { 
  opacity: 1; 
  pointer-events:auto; 
} 
 
.submenu > li { 
  padding: 10px; 
} 
 
.submenu > li:hover { 
  background: white; 
  color: black; 
}

<ul class="menu"> 
  <li>Меню 1 
    <ul class="submenu"> 
      <li>Подменю 1</li> 
      <li>Подменю 2</li> 
      <li>Подменю 3</li> 
    </ul> 
  </li> 
  <li>Меню 2 
    <ul class="submenu"> 
      <li>Подменю 1</li> 
      <li>Подменю 2</li> 
      <li>Подменю 3</li> 
    </ul> 
  </li> 
  <li>Меню 3 
    <ul class="submenu"> 
      <li>Подменю 1</li> 
      <li>Подменю 2</li> 
      <li>Подменю 3</li> 
    </ul> 
  </li> 
</ul>

Добавил решение через jquery.

$('.menu > li').on('mouseenter', function() { 
	const $this = $(this); 
  if ($this.children('.submenu').length === 0) { 
  	$this.addClass('li-hover'); 
  } else { 
  	$this.addClass('li-hover'); 
  	$this.children('.submenu').slideDown(300); 
  } 
}).on('mouseleave',function() { 
	const $this = $(this); 
  if ($this.children('.submenu').length === 0) { 
  	$this.removeClass('li-hover'); 
  } else { 
  	$this.children('.submenu').slideUp(300, function() { 
    	$this.removeClass('li-hover'); 
    }); 
  } 
});

ul { 
  padding: 0; 
} 
.menu { 
  display: flex; 
  flex-wrap: wrap; 
  list-style: none; 
  position: relative; 
} 
 
.menu > li { 
  display: block; 
  padding: 20px 10px; 
  border: 1px solid black; 
  text-align:center; 
  cursor: pointer; 
} 
 
.li-hover { 
  background-color: #022; 
  color: white; 
} 
 
.submenu { 
  display: none; 
  position: absolute; 
  list-style: none; 
  top: 100%; 
  padding: 20px 0px; 
  border: 1px solid black; 
  background-color: #022; 
  color: white; 
  transform: translateX(-10px); 
  transition: opacity 0.3s; 
} 
 
.submenu > li { 
  padding: 10px; 
} 
 
.submenu > li:hover { 
  background: white; 
  color: black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<ul class="menu"> 
  <li>Меню 1 
  </li> 
  <li>Меню 2 
    <ul class="submenu"> 
      <li>Подменю 1</li> 
      <li>Подменю 2</li> 
      <li>Подменю 3</li> 
    </ul> 
  </li> 
  <li>Меню 3 
    <ul class="submenu"> 
      <li>Подменю 1</li> 
      <li>Подменю 2</li> 
      <li>Подменю 3</li> 
    </ul> 
  </li> 
</ul>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Отправка файла из формы на почту [требует правки]

ЗдравствуйтеКак можно отправить файл из трех разных форм на странице на почту без перезагрузки страницы?

294

HTML

Как добавить в форму поиска текст ссылки при нажатии на неё?

Здравствуйте!!! Помогите люди добрые, Есть форма поиска RokAjaxSearch, есть карта рисунка со ссылками, мне надо сделать так чтобы при нажатии на ссылку...

292

HTML

svg text в вектор

ПриветствуюЭкспериментирую с svg и столкнулся с проблемой

239

HTML

Не могу вывести произвольное поле в шаблоне archive-product.php

Есть сайт на wordpress (с плагином woocomerce)Пытаюсь добавить произвольное поле "Редактор WYSIWYG" он же tinyMCE (хотя и обычное текстовое поле тоже не выводиться),...

346