Комплекс jQuery скрыть показать подменю

Я не могу найти правильный способ выполнить всю необходимую логику. Подменю должны быть за пределами его корневой ссылки меню из-за целей компоновки. Нужна следующая логика:

Когда подменю должно ОТКРЫВАТЬСЯ:

на сенсорном устройстве, когда пользователь нажимает на ссылку
в указателе определяет, когда пользователь наводит ссылку
При открытии меню ссылка и подменю должны получить класс «активный».

Когда подменю должно ЗАКРЫВАТЬСЯ:

При нажатии кнопки «Закрыть» (она находится внутри подменю)
Когда открыто другое меню, первое меню должно закрыться
На сенсорном устройстве, когда вы щелкаете в любом месте за пределами подменю
В устройстве указатель, когда мышь покидает область подменю

ОТРЕДАКТИРОВАНО: ЭТО ПОСЛЕДНИЙ КОД, РАБОТАЮЩИЙ НА 100% после @SilverSurfer awnser и некоторых настроек

$(".sub-menu").hide()

$("a.close-bt").click(function(){
    $(this).closest(".sub-menu").hide()
    $(this).closest(".sub-menu").removeClass("active")
    $(this).closest(document).find("a.menu-item").removeClass("active")
});

$(document).on('click mouseover', "ul.menu > a", function () {
    $("ul.menu > a").removeClass("active")
    $(".sub-menu").hide()
    var target = "."+$(this).attr("id")
    $(target).addClass("active")
    $(this).addClass("active")
    $(target).show()
});
$(".sub-menu").mouseleave(function() {
    $(this).hide()
    $(this).removeClass("active")
    $(this).closest(document).find("a.menu-item").removeClass("active")
});

// FUNCTIONAL STYLES

.menu {
	z-index: 2;
}
.menu a {
}
.sub-menu {
	//visibility: hidden;
	//visibility: show;
}
.close-bt {
	
}


// VISUAL STYLES, PLZ IGNORE
.menu {
}
.menu a {
	margin-right: 30px;
	background: green;
	display: inline-block;
	padding: 20px;
	color: white;
}
.menu a.active {
	background: red;
}
.sub-menu {
	width: 100px;
	height: 100px;
	background: lightblue;
	border: 2px solid black;
	z-index: 1;
	position: relative;
}
.sub-menu.active {
	visibility: show;
	background: blue;
}
.close-bt {
	background: red;
	color: white;
	padding: 10px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
ul { margin: 0; left: 0; padding: 0; }


.container  { position: absolute; top: 50px; left: 0; } 
.item1 { position: absolute; top: 10px; left: 0; }
.item2 { position: absolute; top: 10px; left: 110px; }
.item3 { position: absolute; top: 10px; left: 220px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="menu">
	<a class="menu-item" id="item1" href="javascript:void(0);">Link 1</a>
	<a class="menu-item" id="item2" href="javascript:void(0);">Link 2</a>
	<a class="menu-item" id="item3" href="javascript:void(0);">Link 3</a>
</ul>


<div class="container">
	<div class="sub-menu item1">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 1
	</div>
	<div class="sub-menu item2">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 2
	</div>
	<div class="sub-menu item3">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 2
	</div>
</div>

Atimoda 13.10.2017 источник

comment

Проверьте мой ответ, пожалуйста - SilverSurfer 13.10.2017

Ответы (1)

arrow_upward
0
arrow_downward

Это то, что вы ищете?

$(".sub-menu").hide()

$("a.close-bt").click(function(){
    $(this).closest(".sub-menu").hide()
    $(this).closest(".sub-menu").removeClass("active")
    $(this).closest(document).find("ul").removeClass("active")
});

$(document).on('click mouseover', "ul > a", function () {
    $(".sub-menu").hide()
    var target = "."+$(this).attr("id")
    $(target).addClass("active")
    $(this).closest("ul.menu").addClass("active")
    $(target).show()
});

// FUNCTIONAL STYLES

.menu {
	z-index: 2;
}
.menu a {
}
.sub-menu {
	//visibility: hidden;
	//visibility: show;
}
.close-bt {
	
}


// VISUAL STYLES, PLZ IGNORE
.menu {
}
.menu a {
	margin-right: 30px;
	background: green;
	display: inline-block;
	padding: 20px;
	color: white;
}
.menu a.active {
	background: red;
}
.sub-menu {
	width: 100px;
	height: 100px;
	background: lightblue;
	border: 2px solid black;
	z-index: 1;
	position: relative;
}
.sub-menu.active {
	visibility: show;
	background: blue;
}
.close-bt {
	background: red;
	color: white;
	padding: 10px;
	position: absolute;
	right: 10px;
	bottom: 10px;
}
ul { margin: 0; left: 0; padding: 0; }


.container  { position: absolute; top: 50px; left: 0; } 
.item1 { position: absolute; top: 10px; left: 0; }
.item2 { position: absolute; top: 10px; left: 110px; }
.item3 { position: absolute; top: 10px; left: 220px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="menu">
	<a id="item1" href="javascript:void(0);">Link 1</a>
	<a id="item2" href="javascript:void(0);">Link 2</a>
	<a id="item3" href="javascript:void(0);">Link 3</a>
</ul>


<div class="container">
	<div class="sub-menu item1">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 1
	</div>
	<div class="sub-menu item2">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 2
	</div>
	<div class="sub-menu item3">
    <a class="close-bt" href="javascript:void(0);">Close</a>
		Sub-menu 2
	</div>
</div>

SilverSurfer 13.10.2017

comment

Вау! красивый код :) не хватает только одного: скрыть меню, когда в указателях мышь выходит из подменю... - Atimoda; 14.10.2017

Комплекс jQuery скрыть показать подменю

Ответы (1)

Похожие вопросы