Question

以下jQuery为我的菜单创建了一个向下滑动功能：

jQuery(document).ready(function(){
jQuery('.skip-link.skip-nav').click(function(){
jQuery(this).toggleClass('open');
});
});

然而，它目前只是弹出，而不是向下滑动。如何为此添加“幻灯片”功能？ UPDATE：

我试过了：

jQuery(document).ready(function(){
jQuery('.skip-link.skip-nav').click(function(){
jQuery('#header-nav').slideToggle(500);
jQuery(this).toggleClass('open');
});
});

以相反的方式工作（我以前的切换在关闭时显示'x'，在打开时显示汉堡包）。这应该是相反的。

CSS代码：

.skip-link.skip-nav span {
   display: block;
   position: absolute;
   height: 3px;
   width: 30%;
   border-radius: 9px;
   opacity: 1;
   left: 0;
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -o-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: .25s ease-in-out;
   -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out; 
   transition: .25s ease-in-out;
}


.skip-link.skip-nav span:nth-child(1) {
   top: 0px;
   background: #ccc;
}

.skip-link.skip-nav span:nth-child(2),.skip-link.skip-nav span:nth-child(3) {
   top: 10px;
   background: #ccc;
}


.skip-link.skip-nav span:nth-child(4) {
   top: 21px;
   background: #ccc;
}

.skip-link.skip-nav.open span:nth-child(1) {
   top: 18px;
   width: 0%;
   left: 50%;
   background: #000;
}

.skip-link.skip-nav.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #000;
}

.skip-link.skip-nav.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  background: #000;
}

.skip-link.skip-nav.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
  background: #000;
} 

.skip-link.skip-nav .label {
    margin-top: 80px;
}

HTML：

<div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
                <span class="icon"></span>
                <span class="label">MENU</span>
            </a>
</div> </div>

Answer 1

如果我们能够看到您的HTML，那将会有所帮助。我认为您只需要使用jQuery的slideDown()方法：

jQuery(document).ready(function(){
  jQuery('.skip-link.skip-nav').click(function(){
    jQuery('#header-nav').slideDown(500);
    //jQuery(this).toggleClass('open');//try it without this first
  });
});

幻灯片函数jQuery

1 个答案: