Question

如何使用尽可能少的Jquery转换/动画我的.overlay div？以下是codepen.的示例。请随意在Codepen中重写JS。非常感谢！

HTML

          <nav>
            <button class="hamburger hamburger--squeeze" type="button">
              <span class="hamburger-box">
                <span class="hamburger-inner">button</span>
              </span>
            </button>

            <div class="overlay">
                 menu list goes hee 
             </div>
          </nav>

CSS

.overlay {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   background-color: grey;
   overflow: auto;
   z-index: 99;
   text-align: center;
   padding-top: 100px;
 }

Answer 1

这是一个CSS版本，它具有高度和填充顶部的转换。

a2dissite

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: grey;
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 0;
  transition: height 0.5s;
}
.overlayclose {
  position: absolute;
  top: 10px;
  left: 10px;
}

label[for="butt1"] {
  border: 1px solid;
  background: lightgray;
  padding: 2px 4px;
}
#butt1 {
  display: none;
}
#butt1:checked ~ .overlay {
  height: 100%;
  padding-top: 100px;
  transition: height 0.5s, padding-top 0.5s;
}

这是一个带脚本的版本，使用现有的标记

<nav>
  <input type="checkbox" id="butt1">
  <label for="butt1">
      <span class="hamburger-box">
        <span class="hamburger-inner">Button</span>
      </span>
  </label>

  <div class="overlay">
    <label class="overlayclose" for="butt1">Close</label>
    menu list goes hee 
  </div>
</nav>

document.querySelector('button').addEventListener('click', function (e) {
  document.querySelector('.overlay').classList.toggle('overlayshow');
})

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  background-color: grey;
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 0;
  transition: height 0.5s;
}
.overlayshow {
  height: 100%;
  padding-top: 100px;
  transition: height 0.5s, padding-top 0.5s;
}
button {
  position: relative;
  z-index: 100;  
}

这是一个带脚本的2：nd版本，动画顶部/底部

<nav>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner">button</span>
    </span>
  </button>

  <div class="overlay">
    menu list goes hee 
  </div>
</nav>

document.querySelector('button').addEventListener('click', function (e) {
  document.querySelector('.overlay').classList.toggle('overlayshow');
})

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 100%;
  width: 100%;
  background-color: grey;
  overflow: auto;
  z-index: 99;
  text-align: center;
  transition: top 0.5s, bottom 0.5s;
}
.overlayshow {
  top: 100px;
  bottom: 0;
  transition: top 0.5s, bottom 0.5s;
}
button {
  position: relative;
  z-index: 100;  
}

这是一个带脚本的3：rd版本，动画不透明度

<nav>
  <button class="hamburger hamburger--squeeze" type="button">
    <span class="hamburger-box">
      <span class="hamburger-inner">button</span>
    </span>
  </button>

  <div class="overlay">
    menu list goes hee 
  </div>
</nav>

document.querySelector('button').addEventListener('click', function (e) {
  document.querySelector('.overlay').classList.toggle('overlayshow');
})

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: grey;
  overflow: auto;
  z-index: 99;
  text-align: center;
  padding-top: 100px;
  transition: opacity 0.5s;
  opacity: 0;
}
.overlayshow {
  opacity: 1;
  transition: opacity 0.5s;
}
button {
  position: relative;
  z-index: 100;  
}

Answer 2

您可以使用jquery中的toggle函数

来获得转换

$("button").click(function() {
   $(".overlay").toggle("slow");
});

Jsfiddle

希望有所帮助：）

如何在点击按钮上转换叠加菜单

2 个答案: