クエリを使用した応答的なナビゲーション

Question

ul liを使用してレスポンシブなナビゲーションを構築しました。それは小さな画面に隠れていて、jQueryを使ってトグルボタンがあります。問題はメニューにあるliの項目がその項目の1つをクリックしても閉じることができず、クリックしたときにその項目を元に戻すことができないということです。

私がこれまでに得たもののうち、codepenです。

<nav> 
    <span class="nav-btn"></span> 
    <ul class="nav"> 
     <li><a href="#">What</a></li> 
     <li><a href="#">Where</a></li> 
     <li><a href="#">When</a></li> 
     <li><a href="#">Why</a></li> 
    </ul> 
</nav> 

body { 
    margin: 0; 
    padding: 0; 
    font-family: 'helvetica neue', helvetica; 
} 
.nav { 
    background-color: #4f4f4f; 
    list-style: none; 
    margin: 0; 
} 
.nav > li { 
    display: inline-block; 
} 
.nav > li > a { 
    text-decoration: none; 
    font-size: 40px; 
    color: #fff; 
} 

@media (max-width: 600px) { 
    .nav { 
     text-align: left; 
     display: none; 
    } 
    .nav > li { 
     display: block; 
    } 
    .nav-btn { 
     display: block; 
     background-color: #333; 
     color: #fff; 
     text-align: center; 
     cursor: pointer; 
     font-size: 40px; 
    } 
    .nav-btn:before { 
     content: "Menu"; 
    } 

$("span.nav-btn").click(function(event){ 
    $('ul.nav').slideToggle(); 
}); 

$(window).resize(function(){ 
    if ($(window).width() > 600) { 
     $('ul.nav').removeAttr('style'); 
    } 
}); 

お知らせください。それは非常にイライラしています。

Answer 1

以下は、Jsセクションの更新されたコードです。期待通りに動作します。

$("span.nav-btn").click(function(event){ 
    $('ul.nav').slideToggle(); 
}); 

$(window).resize(function(){ 
    if ($(window).width() > 600) { 
     $('ul.nav').removeAttr('style'); 
    } 
}); 

//Code need to be add, 

$(".nav li").click(function(){ 
    if($('ul.nav').css('display') == 'block'){ 
      $('ul.nav').slideUp("slow"); 
    } 
}); 

Answer 2

あなたは2つの別個の行動を求めています。

1. メニュー項目をクリックすると、折りたたむ必要があります。
2. 文書の他の場所をクリックするときは、開いている場合は折りたたむメニューが必要です。

したがって、希望の結果を得るには、documentにバインドされたものとメニュー項目にバインドされた2つのイベントが必要です。

$(document).click(function(event) { 
    if(!$(event.target).closest('#bloopy').length) { 
     $('ul.nav').slideUp(); 
    }   
}); 
$(".nav li").click(function(){ 
    $('ul.nav').slideUp("slow"); 
}); 

DEMO