Клик по родителю
ГУРУ! Помогите пожалуйста, я дилетант в этом.
Есть три div блока в каждом из которых лежат div с менюхой. Надо: 1)при клике на один из, чтобы всплывало меню 2)при клике на другой везде закрывалось и открывалось текущее 3)при клике на родителя с открытым меню , чтобы оно закрывалось Проблема заключается в том что при клике на дочку , т.е. на менюху , она блин закрывается. помогите плиз . пробовал запихать event.target - работает коряво, то закрывает то нет, я так понял, в родителе лежит менюха и иконка , если по иконки попадаешь не закрывается почему то менюха, мимо вроде закрывается , короче я хз , помогите плиз , всю голову сломал https://jsfiddle.net/z1xo04ww/1/ |
|
Agapkin,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.leftmenu.block{
margin-top:15px;
width:100px;
height:100px;
background:green;
display:block;
position: relative;
}
.lalala {
display: none;
}
.leftmenu.block.open-block-leftmenu .lalala {
position: absolute;
display: block;
top: 50px;
left: 100%;
width: 100px;
height: 100px;
background: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var leftmenu = $(".leftmenu");
leftmenu.on("click",function(event) {
if($(event.target).is(".lalala")) return;
leftmenu.not($(this).toggleClass("open-block-leftmenu"))
.removeClass("open-block-leftmenu")
})
});
</script>
</head>
<body>
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
<div class="leftmenu block">
<div class="lalala">
</div>
</div>
</body>
</html>
|
Спасибо Alexandroppolus, рони, ОГРОМНОЕ за помощь!!!!
Код от Alexandroppolus работает четко , а вот от рони почему то нет, менюха все равно закрывается, хотя на пустом блоке работает тоже без вопросов. Не знаю как это связано... но все же, если интересно ниже пример https://jsfiddle.net/ycyL32sy/2/ |
Agapkin,
делайте пример минимальный, но с нужной структурой и классами сразу.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.leftmenu.block{
margin-top:15px;
width:100px;
height:100px;
background:green;
display:block;
position: relative;
}
.nav.fm-menu-vertical {
display: none;
}
.leftmenu.block.open-block-leftmenu .nav.fm-menu-vertical {
position: absolute;
display: block;
top: 50px;
left: 100%;
width: 300px;
height: 100px;
background: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var leftmenu = $(".leftmenu");
leftmenu.on("click",function(event) {
if($(event.target).closest(".fm-menu-vertical").length) return;
leftmenu.not($(this).toggleClass("open-block-leftmenu"))
.removeClass("open-block-leftmenu")
})
});
</script>
</head>
<body>
<div class="leftmenu block">
<i class="fa fa-question" aria-hidden="true"></i>
<h3>lalala</h3>
<ul class="nav fm-menu-vertical level-1">
</ul>
</div>
<div class="leftmenu block">
<i class="fa fa-question" aria-hidden="true"></i>
<h3>Сервис и помощь</h3>
<ul class="nav fm-menu-vertical level-1">
<li>
<a data-toggle="collapse" href="#menu225206965" class="link fake collapsed" aria-expanded="false">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
<span>Обувь</span>
</a>
<div class="collapse" id="menu225206965" aria-expanded="false" style="height: 0px;">
<ul class="nav level-2">
<li class="parent">
<a href="/about/shoes/care-shoes/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Уход за обувью</span>
</a>
</li>
<li class="parent">
<a href="/about/shoes/choose-size/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Как подобрать размер</span>
</a>
</li>
<li class="parent">
<a href="/about/shoes/size-chart/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Таблица размеров</span>
</a>
</li>
</ul>
</div>
</li>
<li class="">
<a href="/about/color/" class="link">
<i class="fa fa-eyedropper" aria-hidden="true"></i>
<span>Цвет</span>
</a>
</li>
<li class="">
<a href="/about/bonus-system/" class="link">
<i class="fa fa-rub" aria-hidden="true"></i>
<span>Бонусная система</span>
</a>
</li>
<li class="">
<a href="/about/make-return/" class="link">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span>Как сделать возврат</span>
</a>
</li>
<li class="">
<a href="/about/make-order/" class="link">
<i class="fa fa-calculator" aria-hidden="true"></i>
<span>Как сделать заказ</span>
</a>
</li>
<li class="">
<a href="/about/status-client/" class="link">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>Статусы клиентов</span>
</a>
</li>
<li class="">
<a href="/about/question-answer/" class="link">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span>Вопрос-ответ</span>
</a>
</li>
</ul></div>
<div class="leftmenu block">
<i class="fa fa-question" aria-hidden="true"></i>
<h3>Сервис и помощь</h3>
<ul class="nav fm-menu-vertical level-1">
<li>
<a data-toggle="collapse" href="#menu225206965" class="link fake collapsed" aria-expanded="false">
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
<span>Обувь</span>
</a>
<div class="collapse" id="menu225206965" aria-expanded="false" style="height: 0px;">
<ul class="nav level-2">
<li class="parent">
<a href="/about/shoes/care-shoes/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Уход за обувью</span>
</a>
</li>
<li class="parent">
<a href="/about/shoes/choose-size/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Как подобрать размер</span>
</a>
</li>
<li class="parent">
<a href="/about/shoes/size-chart/" class="link">
<i class="fa " aria-hidden="true"></i>
<span>Таблица размеров</span>
</a>
</li>
</ul>
</div>
</li>
<li class="">
<a href="/about/color/" class="link">
<i class="fa fa-eyedropper" aria-hidden="true"></i>
<span>Цвет</span>
</a>
</li>
<li class="">
<a href="/about/bonus-system/" class="link">
<i class="fa fa-rub" aria-hidden="true"></i>
<span>Бонусная система</span>
</a>
</li>
<li class="">
<a href="/about/make-return/" class="link">
<i class="fa fa-refresh" aria-hidden="true"></i>
<span>Как сделать возврат</span>
</a>
</li>
<li class="">
<a href="/about/make-order/" class="link">
<i class="fa fa-calculator" aria-hidden="true"></i>
<span>Как сделать заказ</span>
</a>
</li>
<li class="">
<a href="/about/status-client/" class="link">
<i class="fa fa-user-circle" aria-hidden="true"></i>
<span>Статусы клиентов</span>
</a>
</li>
<li class="">
<a href="/about/question-answer/" class="link">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<span>Вопрос-ответ</span>
</a>
</li>
</ul></div>
</body>
</html>
|
Цитата:
рони, ОГРОМНОЕ ВАМ ЧЕЛОВЕЧЕСКОЕ СПАСИБО !!!! |
| Часовой пояс GMT +3, время: 15:32. |