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 を作成し、メニューの 1 つを切り替えるたびに、メニューの後ろに 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 に答える