活动链接不能切换到点击.如何解决

Active link won't toggle on click. How to solve?

本文关键字：何解决 解决 不能 链接 活动      更新时间：2023-09-26

我正在制作一个汉堡包样式的菜单图标，我想在点击时将其动画为"x"，然后让用户再次点击它以使其返回。然而，只有当你点击并按住它时，图标才会一直动画。

我用来切换活动类的脚本不起作用。

如何解决这个问题?

HTML:

<a id="nav-toggle" href="#"><span></span></a>
CSS:

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px; 
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle:active span {
  background-color: transparent;
}
#nav-toggle:active span:before, #nav-toggle:active span:after {
  top: 0;
}
#nav-toggle:active span:before {
  transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg);
}
#nav-toggle:active span:after {
  transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
}
jQuery:

$(document).ready(function(){
  $('#nav-toggle').click( function() {
    if($(this).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
    }//
  });
});

还有jsFiddle

replace

:active 


.active
css

中的

用你的代码演示

您的代码很好。然而，也有一些问题。1)你忘了在你的小提琴中包含jQuery库。2)你已经使用了:active伪元素作为你的样式，在那里他们应该是.active代表class名称

<a id="nav-toggle" href="#"><span></span></a>
CSS

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: black;
  position: absolute;
  display: block;
  content: '';
}
#nav-toggle span:before {
  top: -10px; 
}
#nav-toggle span:after {
  bottom: -10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
  background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
  top: 0;
}
#nav-toggle.active span:before {
  transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg);
}
#nav-toggle.active span:after {
  transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);
}
jQuery

$(document).ready(function(){
$('#nav-toggle').click( function() {
  if($(this).hasClass('active')) {
    $(this).removeClass('active');
  } else {
    $(this).addClass('active');
  }//
});
});

这是你更新的jsfiddle http://jsfiddle.net/rf2qD/5/

相关文章：