使用查詢的響應式導航

我有使用ul li構建的響應式導航。它隱藏在較小的屏幕上，並且有一個使用jQuery的切換按鈕。問題是菜單上的li項目在點擊其中一個項目後將不會關閉，並且在點擊時無法使其切換回去。使用查詢的響應式導航

這是我到目前爲止得到的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'); 
    } 
});

請指教。這是非常令人沮喪的。

來源

2016-11-15 ron doe

是您的CSS代碼完成？重新格式化它會導致括號不公開。 – damienc

以下是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"); 
    } 
});

來源

2016-11-15 09:53:22 Samir

嘿，非常感謝您的幫助。此解決方案的問題在於，當屏幕尺寸較大並且顯示內嵌塊時，ul.nav隱藏點擊 –

你在問兩個單獨的行爲。

單擊菜單項時，需要將其摺疊。
當單擊文檔的其他任何位置時，如果菜單打開，則需要摺疊菜單。

因此，您將需要兩個事件，一個綁定到document和其他菜單項以獲得所需的結果。

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

DEMO

來源

2016-11-15 10:00:38

使用查詢的響應式導航

回答

相關問題