Question

我为我的网站设置了切换导航菜单，目前代码允许用户在单击菜单链接时关闭菜单，但是当您单击页面上的任何其他位置时，它不会关闭。我希望当用户点击活动菜单内的任何地方时隐藏菜单。这是我的代码：

<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 （如果您取消注释封面div中的背景颜色，您会看到它是如何工作的）

添加了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();
});

Jquery导航菜单切换

1 个答案: