汉堡包下拉菜单对点击事件没有响应

在我的标题中，我写了hamburger dd，但是我的组件似乎都没有响应我点击它们。我不知道为什么会这样，如果有人能帮我，我会很高兴的。(简而言之，当我点击汉堡包菜单时，什么也没发生)。

<!DOCTYPE html>
<html lang="en">
<head>
<title>MY CSS WEBSITE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">

<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li class="topnav-right">
<a href="#signUp">Sign Up</a>
</li>
<li class="topnav-right">
<a href="#signIn">Sign In</a>
</li>
<li class="dropdownIcon">
<a href="javascript:void(0)" onclick="dropdownMenu">☰</a>
</li>
</ul>
</nav>     
<script> 
function dropdownMenu(){
console.log(hello);
var x = document.getElementById("dropdownClick");
if(ddc.className === "topnav"){
x.className += " responsive";
}
/*change topnav to topnav.responsive*/
else{
x.className = "topnav";
}
}
</script>
</body>

你的js有很多问题。首先，您需要确保变量名保持一致。(你在一些地方用ddc代替x。此外，请确保字符串位于引号内，否则它们将被视为变量。

固定代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>MY CSS WEBSITE</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<ul class="topnav" id="dropdownClick">

<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#about">About</a>
</li>
<li>
<a href="#news">News</a>
</li>
<li>
<a href="#contact">Contact</a>
</li>
<li class="topnav-right">
<a href="#signUp">Sign Up</a>
</li>
<li class="topnav-right">
<a href="#signIn">Sign In</a>
</li>
<li class="dropdownIcon">
<a href="javascript:dropdownMenu()">☰</a>
</li>
</ul>
</nav>     
<script> 
function dropdownMenu(){
console.log("hello");
var x = document.getElementById("dropdownClick");
if(x.className === "topnav"){
x.className += " responsive";
}
/*change topnav to topnav.responsive*/
else{
x.className = "topnav";
}
}
</script>
</body>

相关内容

最新更新

热门标签：