Question

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

点击$('.menu').hover(function() { $(this).next().css("display", "block"); }); $('.menu').mouseout(function() { $(this).next().css("display", "none"); });

关闭时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
}

Answer 1

代替添加类，而是直接设置宽度，如下所示：

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>

Answer 2

您搞砸的一件事是，您在打开时添加了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>

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

2 个答案: