用于隐藏/显示菜单的外部JavaScript不起作用_Javascript_Html

用于隐藏/显示菜单的外部JavaScript不起作用

javascript html

用于隐藏/显示菜单的外部JavaScript不起作用,javascript,html,Javascript,Html,我对JavaScript还不熟悉，而且还停留在第一个程序中。当我使用内部JavaScript时，它正在工作，但不是来自外部JavaScript文件。 JavaScript在这里不起作用。这里我想使用JavaScript隐藏和显示菜单项，最后一个元素中的按钮仅用于测试 showMenu(){ var x = document.getElementById('mainmenu'); if(x.style.display == "none"){ x.style.display="blo

我对JavaScript还不熟悉，而且还停留在第一个程序中。当我使用内部JavaScript时，它正在工作，但不是来自外部JavaScript文件。 JavaScript在这里不起作用。这里我想使用JavaScript隐藏和显示菜单项，最后一个元素中的按钮仅用于测试

showMenu(){
  var x = document.getElementById('mainmenu');
  if(x.style.display == "none"){
    x.style.display="block";
  }
  else{
    x.style.display="none";
  }
}

html的css

body{
  background-color: white;
  margin: 0;
  padding: 0;
}
#topcontact{
  background-color: teal;
  margin: -16px 0;
}
#topcontact p{
  color:white;
  text-align: center;
  padding:10px;
}

header{
  width:100%;
  background-color: white;
}
ul{
  flex-flow: right;
  margin: 0 auto;
  padding: 0;
  width: 80%;
}
ul li{
  display: inline-block;
  list-style: none;
  padding: 15px;
}
ul li:hover{
  background: lightgrey;
}
ul li a{
  text-decoration: none;
  text-transform: uppercase;
}
.toggle{
  width: 100%;
  padding: 10px 20px;
  background: #001f44;
  text-align: right;
  box-sizing: border-box;
  color:#fff;
  font-size: 30px;
  display: none;
}
@media (max-width: 768px){
  .toggle{
    display: block;
  }
  ul {
    width: 100%;
  }
  ul li{
    display: block;
    text-align: center;
  }
}

这是我的html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Welcome to JS page</title>
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">

</head>
<body>

    <header>
        <div class="toggle">
            <i class="fas fa-bars" onclick="showMenu()"></i>
        </div>
        <div id="mainmenu">
                <ul>
                    <li><a href="#"> Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Education Materials</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Contact us</a></li>
                </ul>
        </div>
    </header>
    <button type="button" onclick="document.getElementById('buttonshowing').style.display='block'">Show Data</button>
    <div id="buttonshowing" style="display: none;">you clicked show data</div>

    <script type="text/javascript" src="/assets/js/mainjs.js"></script>
</body>

</html>


欢迎来到JS页面







显示数据
您单击了“显示数据”

我想你把文件放错了。您缺少一个表示当前目录的

点

使用以下命令：

并始终使用

函数

关键字声明函数：

功能显示菜单（）{
var x=document.getElementById（'mainmenu'）；
如果（x.style.display==“无”）{
x、 style.display=“block”；
}否则{
x、 style.display=“无”；
}
};请减少代码以仅包含对您有问题的部分。这样，问题对其他人来说就更清楚了。谢谢你的回复。点不是问题所在，但我发现了一个简单的错误，即分号；在函数之后。无论如何，谢谢you@EverestBeauties祝你好运！：）