错误

Question

我想显示＆＃34;打开＆＃34;当导航栏不可见时以及何时可见＆＃34;打开＆＃34;应该隐藏，这里有什么不对？，我在html和javascript中显然是一个菜鸟，我写了这段代码，它在这里工作有什么不对吗？

  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;

更新

<!-- nav bar -->
<section id = "Navbar">
  <div>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" id = "close">&times;</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">&#9776;</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>&times</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

Answer 1

如果你想检查价值，那么至少需要两个等号。

错误

if (nav.style.width = "0px")

好

if (nav.style.width == "0px")

更好

if (nav.style.width === "0px")

Answer 2

您应该在条件中使用==运算符，而不是=。

Answer 3

您不应该调整该元素的大小。使用nav.toggle()（JQuery）来更改可见性。

Answer 4

从我可以看到你除了比较==而不是=之外还有一些问题，这是之前提到过的作业。

关闭按钮的id首先应为：

"Close"

中的

"close"而不是HTML

其次，您在更改任何check()后未在JavaScript中调用styles，这就是为什么在点击按钮后页面加载后打开/关闭将保持不可见的原因。

所以应该是这样的：

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";
      }
  }

切换显示哪一个。

工作片段：

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";
    }
}

    *
{
  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;
  display: none;
}


#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*/

<!-- nav bar -->
<section id = "Navbar">
  <div>
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()" id = "Close">&times;</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">&#9776;</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>&times</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 -->

Javascript if / else，这里有什么问题？

4 个答案:

错误

好

更好