jquery导航菜单切换

Question

我有一个切换navi菜单为我的网站设置，目前的代码允许用户关闭菜单，当你点击菜单链接，但它不会关闭，当你点击页面上的任何其他地方。我希望当用户在任何地方点击除了活动菜单内部的菜单以隐藏菜单。这里是我的代码：

<script type="text/javascript"> 
$(document).ready(function() { 
$('#toggleLink').click(function() { 
    $('#showme1').slideToggle(600); 
    $('#showme2,#showme3,#showme4').hide (400); 
    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#toggleLink2').click(function() { 
    $('#showme2').slideToggle(600); 
    $('#showme1,#showme3,#showme4').hide (400); 

    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#toggleLink3').click(function() { 
    $('#showme3').slideToggle(600); 
    $('#showme1,#showme2,#showme4').hide (400); 

    }); 
}); 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 
$('#toggleLink4').click(function() { 
    $('#showme4').slideToggle(600); 
    $('#showme1,#showme2,#showme3').hide (400); 
    }); 
}); 
</script>` 

Answer 1

这是我会做的。创建一个最初隐藏的div，然后当您切换其中一个菜单时，在菜单后面显示div（绝对定位）。然后将点击绑定到该div，以便每当它被点击时隐藏该菜单。

jsFiddle example（如果您取消注释在盖格的背景颜色，你会看到它是如何工作）

添加HTML

<div id="cover"></div> 

新增CSS

#cover { 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    z-index:1; 
    display:none; 
} 

新增jQuery

$('#toggleLink,#toggleLink2,#toggleLink3,#toggleLink4,#toggleLink5').on("click", function() { 
    $('#cover').show(); 
}); 
$('#cover').click(function() { 
    $('#showme1,#showme2,#showme3,#showme4,#showme5').hide(400); 
    $(this).hide(); 
});