Question

我是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>

Answer 1

我认为您输入的文件不正确。您缺少一个代表当前目录的DataGrid。

使用此：

dot

并始终使用关键字<script type="text/javascript" src="./assets/js/mainjs.js"></script>声明一个函数：

function

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

1 个答案: