jQuery 复杂隐藏显示子菜单

Question

我想不出一个合适的方法来完成所有需要的逻辑。出于布局目的，子菜单需要位于其菜单 link 根之外。需要的逻辑是：

子菜单打开的时间：

在触摸设备中，当用户在link

点击

在 指针中决定 当用户悬停在 link
菜单打开时，link和子菜单必须得到"active" class.

子菜单何时关闭：

单击 "Close" 按钮时（位于子菜单内）
当另一个菜单打开时，第一个菜单应该关闭
在 touch 设备中，当您单击子菜单外的任意位置时
在指针设备中，当鼠标离开子菜单区域时

已编辑：这是 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>

Answer 1

这是您要找的吗？

$(".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>

jQuery 复杂隐藏显示子菜单

jQuery complex hide show submenu

jquery

show

hide

submenu