jQuery複雜隱藏顯示子菜單

Question

我找不出一個合適的方法來完成所有需要的邏輯。由於佈局的目的，子菜單需要位於其菜單鏈接根目錄之外。所需的邏輯是：

當子菜單應該打開：

1. 在觸控裝置當上鏈路用戶抽頭在指針
2. 決定當用戶懸停鏈接
3. 當菜單打開時，鏈接和子菜單必須獲得「活動」類。

當子應該關閉：

1. 當點擊「關閉」按鈕（其位於內子菜單）
2. 當另一個菜單打開時，第一個菜單應該關閉
3. 在觸摸設備，當您點擊子菜單外的任何地方
4. 在指針裝置中，當鼠標離開子菜單區域

---

EDITED：這是最後的CODE @SilverSurfer awnser工作後100％ 和一些ajusts

---

$(".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 { 
 
\t z-index: 2; 
 
} 
 
.menu a { 
 
} 
 
.sub-menu { 
 
\t //visibility: hidden; 
 
\t //visibility: show; 
 
} 
 
.close-bt { 
 
\t 
 
} 
 

 

 
// VISUAL STYLES, PLZ IGNORE 
 
.menu { 
 
} 
 
.menu a { 
 
\t margin-right: 30px; 
 
\t background: green; 
 
\t display: inline-block; 
 
\t padding: 20px; 
 
\t color: white; 
 
} 
 
.menu a.active { 
 
\t background: red; 
 
} 
 
.sub-menu { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: lightblue; 
 
\t border: 2px solid black; 
 
\t z-index: 1; 
 
\t position: relative; 
 
} 
 
.sub-menu.active { 
 
\t visibility: show; 
 
\t background: blue; 
 
} 
 
.close-bt { 
 
\t background: red; 
 
\t color: white; 
 
\t padding: 10px; 
 
\t position: absolute; 
 
\t right: 10px; 
 
\t 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"> 
 
\t <a class="menu-item" id="item1" href="javascript:void(0);">Link 1</a> 
 
\t <a class="menu-item" id="item2" href="javascript:void(0);">Link 2</a> 
 
\t <a class="menu-item" id="item3" href="javascript:void(0);">Link 3</a> 
 
</ul> 
 

 

 
<div class="container"> 
 
\t <div class="sub-menu item1"> 
 
    <a class="close-bt" href="javascript:void(0);">Close</a> 
 
\t \t Sub-menu 1 
 
\t </div> 
 
\t <div class="sub-menu item2"> 
 
    <a class="close-bt" href="javascript:void(0);">Close</a> 
 
\t \t Sub-menu 2 
 
\t </div> 
 
\t <div class="sub-menu item3"> 
 
    <a class="close-bt" href="javascript:void(0);">Close</a> 
 
\t \t Sub-menu 2 
 
\t </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 { 
 
\t z-index: 2; 
 
} 
 
.menu a { 
 
} 
 
.sub-menu { 
 
\t //visibility: hidden; 
 
\t //visibility: show; 
 
} 
 
.close-bt { 
 
\t 
 
} 
 

 

 
// VISUAL STYLES, PLZ IGNORE 
 
.menu { 
 
} 
 
.menu a { 
 
\t margin-right: 30px; 
 
\t background: green; 
 
\t display: inline-block; 
 
\t padding: 20px; 
 
\t color: white; 
 
} 
 
.menu a.active { 
 
\t background: red; 
 
} 
 
.sub-menu { 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: lightblue; 
 
\t border: 2px solid black; 
 
\t z-index: 1; 
 
\t position: relative; 
 
} 
 
.sub-menu.active { 
 
\t visibility: show; 
 
\t background: blue; 
 
} 
 
.close-bt { 
 
\t background: red; 
 
\t color: white; 
 
\t padding: 10px; 
 
\t position: absolute; 
 
\t right: 10px; 
 
\t 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"> 
 
\t <a id="item1" href="javascript:void(0);">Link 1</a> 
 
\t <a id="item2" href="javascript:void(0);">Link 2</a> 
 
\t <a id="item3" href="javascript:void(0);">Link 3</a> 
 
</ul> 
 

 

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