Ожидание закрытия
326
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>
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
-
21:28
-
22:18
-
08:00
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50027 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31914 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 25985 visits
- Как через css изменить цвет png изображения? 11735 visits
- Blob video url download 11284 visits
- Php curl запрос через прокси с авторизацией 10685 visits
- Работа с captcha vk api 9483 visits
![Отправка файла из формы на почту [требует правки]](https://hostciti.net/images/nophoto.png "Отправка файла из формы на почту [требует правки]")
© "hostciti.net" 27.1.2026 | 05:14