為什么我的下拉菜單不適用於導航欄？
[英]Why isn't my dropdown menu working on navbar?
問題描述
我正在嘗試開發響應式頂級導航菜單，我在漢堡包菜單上遇到了一些麻煩。 當我調整瀏覽器大小並單擊漢堡包圖標時，它將不會執行任何操作。 我的html上有jquery，但是由於某種原因我無法在瀏覽器調整大小時關閉菜單。 任何幫助，將不勝感激。
這是我的代碼：
$('.nav-toggle').click(function() { if ($('.top-nav-links').css('margin-top') == '-225px') { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } }); $(window).resize(function() { if ($(window).width() > 730) { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } }); $(document).ready(function() { if ($(window).width() > 730) { $('.top-nav-links').css('margin-top', '0'); } else { $('.top-nav-links').css('margin-top', '-255px'); } });
body { margin: 0; padding: 0; font-family: sans-serif; font-size: 16px; color: #333; background-color: #f8f8f8; } .clearfix:after { content: ""; display: table; clear: both; } /* TOP NAVIGATION CSS */ .top-nav { position: relative; width: 100%; height: auto; background-color: #fff; padding: 0 30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .logo:link { color: red; text-decoration: none; font-size: 26pt; margin: 10.5px 0; display: inline-block; float: left; font-weight: bold; } .logo:visited { color: red; text-decoration: none; } .top-nav-links { display: inline-block; margin: 0; float: right; } .top-nav-links li { display: inline-block; margin: 0 10px; padding: 15px 0; } .top-nav-links li:first-of-type { margin-left: 0; } .top-nav-links li:last-of-type { margin-right: 0; } .top-nav-links li a:link { color: red; text-decoration: none; font-size: 18px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .top-nav-links li a:visited { color: red; text-decoration: none; font-size: 18px; } .top-nav-links li a:hover { color: red; } .nav-toggle { float: right; font-size: 30px; margin: 8.2px 0; color: red; cursor: pointer; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; display: none; } .nav-toggle:hover { color: red; } @media all and (max-width: 730px) { .top-nav-links { position: relative; display: block; width: 100%; height: auto; margin: 0 auto; margin-top: -255px; display: none; } .top-nav-links li { display: block; margin: 0; text-align: center; } .nav-toggle { display: inline-block; } }
<html> <head> <title>TopNav</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="style.css" rel="stylesheet" type="text/css"> <link href="https://unpkg.com/ionicons@4.5.5/dist/css/ionicons.min.css" rel="stylesheet" type="text/css"> <!-- SCRIPTS --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src="functions.js"> </script> </head> <body> <!-- TOP NAVIGATION --> <div class="top-nav clearfix"> <a href="index.html" class="logo">TopNav</a> <div class="nav-toggle"> <i class="icon ion-md-menu"></i> </div> <ul class="top-nav-links"> <li> <a href="#">Home</a> </li> <li> <a href="#">Shop</a> </li> <li> <a href="#">About Us</a> </li> <li> <a href="#">Contact Us</a> </li> </ul> </div> </body> </html>
1 個解決方案
解決方案1
1 2019-02-10 06:41:19
nav-toggle click功能存在一些問題。
- 在條件下你正在檢查
margin-top值-225px到處其他地方-255px我認為這是一個錯字。 - 在
max-width: 730px屏幕上，您將display: none添加到top-nav-links類。 您還需要在nav-toggleclick功能中切換它。
您的最終nav-toggle click功能可能如下所示：
$('.nav-toggle').click(function () {
if ($('.top-nav-links').css('margin-top') == '-255px') {
$('.top-nav-links').css('margin-top', '0').css('display', 'inline-block');
} else {
$('.top-nav-links').css('margin-top', '-255px').css('display', 'none');
}
});
單擊導航菜單后，為什么下拉菜單在我的導航欄中不起作用？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.