jQuery комплекс скрий покажи подменю

Не мога да разбера правилен начин да изпълня цялата необходима логика. Подменютата трябва да са извън основната връзка на менюто поради целите на оформлението. Необходимата логика е:

Кога подменюто трябва да се ОТВОРИ:

  1. в тъч устройство, когато потребителят докосне връзката
  2. в показател да реши кога потребителят да задържи върху връзката
  3. Когато менюто е отворено, връзката и подменюто трябва да получат клас "активен".

Кога подменюто трябва да се ЗАТВОРИ:

  1. Когато се щракне върху бутона "Затвори" (намира се в подменюто)
  2. Когато е отворено друго меню, първото трябва да се затвори
  3. В тъчустройство, когато щракнете някъде извън подменюто
  4. В устройство с показател, когато мишката напусне областта на подменюто

РЕДАКТИРАНО: ТОВА Е КРАЙНИЯТ КОД, РАБОТЕЩ НА 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="/bgjavascript:void(0);">Link 1</a>
	<a class="menu-item" id="item2" href="/bgjavascript:void(0);">Link 2</a>
	<a class="menu-item" id="item3" href="/bgjavascript:void(0);">Link 3</a>
</ul>


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


hide jquery show submenu
person Atimoda    schedule 13.10.2017    source източник
comment
Моля, проверете отговора ми   -  person SilverSurfer    schedule 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="/bgjavascript:void(0);">Link 1</a>
	<a id="item2" href="/bgjavascript:void(0);">Link 2</a>
	<a id="item3" href="/bgjavascript:void(0);">Link 3</a>
</ul>


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

person SilverSurfer    schedule 13.10.2017
comment
Еха! красив код :) липсва му само едно нещо: скриване на менюто, когато в указателните устройства мишката напусне подменюто... - person Atimoda; 14.10.2017