Question

我确信这是一个简单的解决方法，但我无法理解。

单击时，以下代码将我的汉堡变成'X'，同时创建一个向下滑动切换，打开“header-nav”。再次点击（现在在'X'上），它会变成一个汉堡包，并且“header-nav”会滑回并隐藏起来....

但是...

它实际上做的是相反的。它在关闭时显示'X'，在打开时显示汉堡包。嗯。有什么想法吗？

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>

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

JQUERY：

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

似乎正在敲除它的是：

jQuery('#header-nav').slideToggle(200);

与此相反。没有这个就可以了。但我需要这个“幻灯片”效果。

JQuery切换幻灯片功能不正常工作

0 个答案: