HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</div>
</div>
jQuery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
我想在.menu-drop
和.menu-icon
之外单击然后.menu-drop
div隐藏
单击菜单下拉div时,它不会隐藏。
答案 0 :(得分:1)
将namespaces="ns1 ns2"
deployments="dep1 dep2"
for ns in ${namespaces}; do
for dep in ${deployments}; do
kubectl rollout restart deployment/"${dep}" --namespace="${ns}"
done
done
与mouseup
一起使用,如下所示。
document
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
答案 1 :(得分:0)
单击文档时,如果菜单中没有元素<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</div>
</div>
,则可以检查所单击元素是否具有特定的类。您还必须防止在单击菜单时传播事件。
slideUp()
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
答案 2 :(得分:0)
这里有一些修改
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</div>
</div>
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
答案 3 :(得分:0)
在主体上使用单个事件侦听器。查询事件目标,并根据需要显示和隐藏菜单。
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li><a href="#">ABOUT</a></li>
<li><a href="#">SERVICES</a></li>
</ul>
</div>
</div>