Javascript if/else，what'；这里怎么了？_Javascript

Javascript if/else，what'；这里怎么了？

javascript

Javascript if/else，what'；这里怎么了？,javascript,Javascript,当导航条不可见时，我想显示“打开”，当导航条可见时，应该隐藏“打开”，这里有什么问题，我显然是html和javascript的noob，我写了这段代码，它不起作用，这里出了什么问题 var nav = document.getElementById("Navbar"); var b = document.getElementById("Body"); var open = document.getElementById("Open"); var close = document.

当导航条不可见时，我想显示“打开”，当导航条可见时，应该隐藏“打开”，这里有什么问题，我显然是html和javascript的noob，我写了这段代码，它不起作用，这里出了什么问题

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

脚本更新

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

我得到的

如果要检查值，则至少需要两个等号

错好更好

您应该在您的条件下使用

操作符，而不是

您不应该调整该元素的大小。使用

nav.toggle（）
关闭按钮的id
首先应为：
function check()
  {
    if (nav.style.width == "0px")
      {
        close.style.display = "none";
        open.style.display = "block";
      }
    else
      {
        open.style.display = "none";
        close.style.display = "block";
      }
  }

在HTML

其次，更改任何样式后，您不会在JavaScript
中调用check（）
，这就是为什么单击按钮时，页面加载后打开/关闭将保持不可见的原因
所以应该是这样的：
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（“主体”）；
var open=document.getElementById（“open”）；
var close=document.getElementById（“close”）；
函数openNav（）{
nav.style.width=“250px”；
b、 style.marginLeft=“250px”；
检查（）；
}
函数closeNav（）{
nav.style.width=“0px”；
b、 style.marginLeft=“0px”；
检查（）；
}
函数检查（）
{
如果（nav.style.width==“0px”）
{
close.style.display=“无”；
open.style.display=“block”；
}
其他的
{
open.style.display=“无”；
close.style.display=“block”；
}
}
*
{
填充：0px；
边际：0px；
边界：2px；
}
身体
{
填充：0px；
边际：0px；
}
#导航栏
{
身高：100%；
宽度：250px；
位置：固定；
z指数：1；
排名：0；
左：0；
背景色：#111；
溢出x：隐藏；
过渡：0.5s；
填充顶部：60px；
}
#导航栏a
{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：25px；
颜色：#818181；
显示：块；
过渡：0.3s；
}
#导航栏a:悬停，.offcanvas a:焦点
{
颜色：#f1f1；
背景色：#535353；
}
#导航栏关闭
{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
左边距：50像素；
}
保险商实验室
{
风格：无；
}
#家
{
显示：无；
}
#学生
{
/*显示：无*/
}
#教师
{
显示：无；
}
#诺蒂夫
{
显示：无；
}
#CP
{
显示：无；
}
#管理员
{
显示：无；
}
#身体
{
过渡：左边距。5s；
填充：16px；
左边距：250像素；
}
身体{
字体系列：“Lato”，无衬线；
}
@媒体屏幕和屏幕（最大高度：450像素）{
#导航栏{填充顶部：15px；}
#导航栏a{字体大小：18px；}
}
#打开
{
浮动：对；
过渡：0.4s；
显示：无；
}
#头
{
字体大小：60px；
}
/*学生*/
#Cblock
{
过渡：0.5s；
宽度：100%；
高度：60px；
溢出y：隐藏；
背景色：#111；
边框：2个虚线#f69c55；
溢出y：隐藏；
颜色：#fff；
}
#cln
{
显示：内联块；
垂直对齐：中间对齐；
线高：正常；
字体大小：50px；
身高：继承；
}
#CImg
{
位置：静态；
浮动：对；
高度：50px；
宽度：50px；
边界半径：50%；
填充：10px；
}
#Cblock:悬停
{
过渡：0.5s；
颜色：#111；
背景#5353；
}
/*学生终点*/
/*教师*/
#蒂姆
{
位置：静态；
浮动：对；
高度：2倍；
宽度：2倍；
填充：10px；
背景：红色；
}
/*教师结束*/
/*通知*/
#削减
{
浮动：对；
高度：2倍；
宽度：2倍；
右边距：30px；
}
#剪
{
字号：38px；
}
/*通知结束*/
/*背景*/
#谢德h1
{
保证金：0自动；
}
/*设置结束*/

家
学生
教师
通知
控制面板
管理
☰
家
学生
_类名_
教师
_教师姓名_
通知
_通知_
&时代
设置
管理面板
首先要注意的是=
和=之间的区别。它几乎成功了，但仍然没有按照我想要的方式工作。“打开”现在永久不可见。然后向我们提供你的HTML代码。好的，用HTML和cssyeah更新了。谢谢，但你能告诉我，当导航栏为0px时，如何将“打开”改回可见状态，谢谢你reply@ShashwatMishra. 抱歉，更新了，基本上检查功能没有显示打开或关闭，所以当你隐藏一个时，你需要显示另一个。收到问题后，请记住选择正确答案。谢谢您的回复，但它仍然不起作用。更新了代码现在什么不起作用？我不知道，但“打开”仍然不可见
if (nav.style.width === "0px")

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