代码之家 › 专栏 › 技术社区 › Beep

点击时弹出侧栏给出奇怪的结果

css html javascript

Beep · 技术社区 · 6 年前

我有一个简单的弹出式菜单,在单击时展开,然后单击关闭图标关闭。

点击 left:250px

接近 left:0

这打开和关闭都很好,直到我再次尝试打开,一旦我关闭,它将不会打开。

我怎样才能纠正这种行为,使其正常打开和关闭。

function openNav() {
  // event && event.stopPropagation();

  // document.getComputedStyle(document.getElementById(mySidenav)[0], null).getPropertyValue("popoutwidth");
  // document.getElementById("mySidenav").style.width = "25";
  document.getElementById("mySidenav").classList.add('popoutwidthopen');
  document.getElementById("hamburger-icon").style.opacity = "0";
  document.getElementById("hamburger-icon").style.fontSize = "1";
  document.getElementById("hamburger-icon").style.marginRight = "0";
}

function closeNav() {

  document.getElementById("mySidenav").classList.add('popoutwidthclose');
  // document.getElementById("mySidenav").style.width = "0";
  document.getElementById("hamburger-icon").style.opacity = "1";
  document.getElementById("hamburger-icon").style.fontSize = "28";
  document.getElementById("hamburger-icon").style.marginRight = "15";

}

.sidenav {
  position: absolute;
  height: -webkit-fill-available;
  /* position: absolute; */
  width: 0;
  z-index: 1;
  /* margin-top: 18px; */
  left: 0;
  background-color: #ffffffba;
  overflow-x: hidden;
  color: black;
  transition: 0.5s;
  padding-top: 50px;
}

.popoutwidthopen {
  width: 250px
}

.popoutwidthclose {
  width: 0
}

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-11" style=" margin-top: 7px;">
    <span id="hamburger-icon" onclick="openNav()" style="vertical-align: middle; opacity: 1; font-size: 28px; margin-right: 15px;">â°</span>
    <img class=" logo-img-big local-logo-img-big" src="#">Logo here
  </div>

</div>

<div id="mySidenav" class="sidenav">
  <div class="container">
    <div class="row">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

      <!--Start Sectors & Products-->
      <button class="dropdown-btn">
                        <span><i class="fa fa-caret-down"></i>button</span>
                    </button>
      <ul>
        <li>one</li>
        <li>two</li>
      </ul>
    </div>
  </div>
</div>

2 回复 | 直到 6 年前

Nikhil Kinkar 6 年前

你搞砸的一件事是,你在打开的时候 popoutwidth 类,但关闭时将内联样式设置为 width:0; ,这样当下次打开时,代码工作正常,但前一个关闭函数设置的内联样式导致了问题。

function openNav() {
  // event && event.stopPropagation();

  // document.getComputedStyle(document.getElementById(mySidenav)[0], null).getPropertyValue("popoutwidth");
  // document.getElementById("mySidenav").style.width = "25";
  document.getElementById("mySidenav").classList.add('popoutwidth');
  document.getElementById("hamburger-icon").style.opacity = "0";
  document.getElementById("hamburger-icon").style.fontSize = "1";
  document.getElementById("hamburger-icon").style.marginRight = "0";
}

function closeNav() {
document.getElementById("mySidenav").classList.remove('popoutwidth');
  document.getElementById("hamburger-icon").style.opacity = "1";
  document.getElementById("hamburger-icon").style.fontSize = "28";
  document.getElementById("hamburger-icon").style.marginRight = "15";

}

.sidenav {
  position: absolute;
  height: -webkit-fill-available;
  /* position: absolute; */
  width: 0;
  z-index: 1;
  /* margin-top: 18px; */
  left: 0;
  background-color: #ffffffba;
  overflow-x: hidden;
  color: black;
  transition: 0.5s;
  padding-top: 50px;
}

.popoutwidth {
  width: 250px
}

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-11" style=" margin-top: 7px;">
    <span id="hamburger-icon" onclick="openNav()" style="vertical-align: middle; opacity: 1; font-size: 28px; margin-right: 15px;">â°</span>
    <img class=" logo-img-big local-logo-img-big" src="cms-images/logo.png">
  </div>

</div>

<div id="mySidenav" class="sidenav">
  <div class="container">
    <div class="row">
      <a class="closebtn" onclick="closeNav()">&times;</a>

      <!--Start Sectors & Products-->
      <button class="dropdown-btn">
                        <span><i class="fa fa-caret-down"></i>button</span>
                    </button>
      <ul>
        <li>one</li>
        <li>two</li>
      </ul>
    </div>
  </div>
</div>

alanfcm 6 年前

不要添加类,而是直接设置宽度,如下所示:

function openNav() {
  // event && event.stopPropagation();

  // document.getComputedStyle(document.getElementById(mySidenav)[0], null).getPropertyValue("popoutwidth");
  // document.getElementById("mySidenav").style.width = "25";
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("hamburger-icon").style.opacity = "0";
  document.getElementById("hamburger-icon").style.fontSize = "1";
  document.getElementById("hamburger-icon").style.marginRight = "0";
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("hamburger-icon").style.opacity = "1";
  document.getElementById("hamburger-icon").style.fontSize = "28";
  document.getElementById("hamburger-icon").style.marginRight = "15";

}

.sidenav {
  position: absolute;
  height: -webkit-fill-available;
  /* position: absolute; */
  width: 0;
  z-index: 1;
  /* margin-top: 18px; */
  left: 0;
  background-color: #ffffffba;
  overflow-x: hidden;
  color: black;
  transition: 0.5s;
  padding-top: 50px;
}

<div class="row">
  <div class="col-md-6 col-sm-6 col-xs-11" style=" margin-top: 7px;">
    <span id="hamburger-icon" onclick="openNav()" style="vertical-align: middle; opacity: 1; font-size: 28px; margin-right: 15px;">â°</span>
    <img class=" logo-img-big local-logo-img-big" src="cms-images/logo.png">
  </div>

</div>

<div id="mySidenav" class="sidenav">
  <div class="container">
    <div class="row">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

      <!--Start Sectors & Products-->
      <button class="dropdown-btn">
                        <span><i class="fa fa-caret-down"></i>button</span>
                    </button>
      <ul>
        <li>one</li>
        <li>two</li>
      </ul>
    </div>
  </div>
</div>