1

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

<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>`
4

1 回答 1

0

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

jsFiddle 示例（如果您取消注释封面 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();
});
于 2013-04-30T15:45:31.917 回答