-1
我想显示“打开”，当导航栏不可见时，当它是可见的“打开”应该隐藏，这里有什么问题？ ，我显然是在html和JavaScript的noob，我写了这段代码，这不是在这里有什么不对？Javascript if/else，这里有什么问题？
var nav = document.getElementById("Navbar");
var b = document.getElementById("Body");
var open = document.getElementById("Open");
var close = document.getElementById("Close");
function openNav() {
nav.style.width = "250px";
b.style.marginLeft = "250px";
}
function closeNav() {
nav.style.width = "0px";
b.style.marginLeft= "0px";
}
function check()
{
if (nav.style.width == "0px")
{
close.style.display = "none";
}
else
{
open.style.display = "none";
}
}
window.onload = check;
UPDATE
<!-- nav bar -->
<section id = "Navbar">
<div>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()" id = "close">×</a>
<a>home</a>
<a>Students</a>
<a>Teachers</a>
<a>Notification</a>
<a>Control Panel</a>
<a>Admin</a>
</div>
</section>
<!--nav end-->
<!-- Body -->
<section id ="Body" >
<span style="font-size:30px;cursor:pointer" onclick="openNav()" id = "Open">☰</span>
<!-- Home -->
<section id = "home">
<div id = "head">
<h1>Home</h1>
</div>
<div>
</div>
</section>
<!-- home ends -->
<!-- Students -->
<section id = "students" >
<span id = "head">
<h1>Students</h1>
</span>
<div id = "Cblock">
<span id = "cln">
<h3>_className_</h3>
</span>
<span id = "CImg">
<img Src = "" >
<!-- Students ends -->
<!-- Teachers -->
<section id = "Teachers">
<span id = "head">
<h1>Teachers</h1>
</span>
<div id = "Cblock">
<span id = "Cln">
<h3>_teacherName_</h3>
</span>
<span id = "TImg">
<img Src = "" id = "img" >
</span>
</div>
</section>
<!-- teachers ends -->
<!-- notification -->
<section id = "Notif">
<span id = "head">
<h1>Notificationss</h1>
</span>
<div id = "Cblock">
<span id = "Cln">
<h3>_Notification_</h3>
</span>
<span id = "Cut">
<a>×</a>
</span>
</div>
</section>
<!-- notification ends -->
<!-- control panel -->
<section id = "CP">
<span id = "Shead">
<h1>Settings</h1>
</span>
</section>
<!-- Control panel ends -->
<!-- Admin -->
<section id = "admin">
<span id = "head">
<h1>Admin Panel</h1>
</span>
</section>
<!-- Admin ends -->
<!-- supposed to be hidden -->
<section>
</section>
<!-- hidden shit ends here -->
*
{
padding : 0px;
margin : 0px;
border: 2px;
}
body
{
padding : 0px;
margin : 0px;
}
#Navbar
{
height: 100%;
width: 250px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
#Navbar a
{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
#Navbar a:hover, .offcanvas a:focus
{
color: #f1f1f1;
background-color: #535353;
}
#Navbar .closebtn
{
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
ul
{
style : none;
}
#Home
{
display: none;
}
#students
{
/*display: none;*/
}
#Teachers
{
display: None;
}
#Notif
{
display:None;
}
#CP
{
display : none;
}
#admin
{
display : none;
}
#Body
{
transition: margin-left .5s;
padding: 16px;
margin-left: 250px;
}
body {
font-family: "Lato", sans-serif;
}
@media screen and (max-height: 450px) {
#Navbar {padding-top: 15px;}
#Navbar a {font-size: 18px;}
}
#Open
{
float: right;
transition : 0.4s;
}
#head
{
font-size: 60px;
}
/*Students*/
#Cblock
{
transition : 0.5s;
width: 100%;
height : 60px;
overflow-y: hidden;
background-color: #111;
border: 2px dashed #f69c55;
overflow-y: hidden;
color : #fff;
}
#cln
{
display: inline-block;
vertical-align: middle;
line-height: normal;
font-size: 50px;
height : inherit;
}
#CImg
{
position: static;
float : right;
height : 50px;
width : 50px;
border-radius: 50%;
padding : 10px;
}
#Cblock:hover
{
transition: 0.5s;
Color : #111;
background : #535353;
}
/*Students Ends*/
/*Teachers*/
#TImg
{
position: static;
float : right;
height : 2px;
width : 2px;
padding : 10px;
background : red;
}
/*Teachers Ends*/
/*Notifications*/
#Cut
{
float : right;
height : 2px;
width : 2px;
margin-right : 30px;
}
#Cut a
{
font-size: 38px;
}
/*Notification ends*/
/*Settings*/
#shead h1
{
margin: 0 auto;
}
/*settings ends*/
脚本更新
var nav = document.getElementById("Navbar");
var b = document.getElementById("Body");
var open = document.getElementById("Open");
var close = document.getElementById("Close");
function openNav() {
nav.style.width = "250px";
b.style.marginLeft = "250px";
check();
}
function closeNav() {
nav.style.width = "0px";
b.style.marginLeft= "0px";
check();
}
function check()
{
if (nav.style.width == "0px")
{
close.style.display = "none";
open.style.display = "block";
}
else
{
open.style.display = "none";
close.style.display = "block";
}
}
什么我得到
Open Navbar all good here Closed Navbar not good , Open button is invisible
第一件事记'='和''==之间的差异。 – Idos