jQuery的HTML数据效果

HTML Data-Effect to jQuery

本文关键字：数据 HTML jQuery      更新时间：2023-09-26

我当前正在将此HTML片段用于导航菜单。标签中的数据效果属性（data effect="st-effect-12"）激活转换以打开导航菜单。

我想把它改成jQuery。所以jQuery将处理点击。然后将切换st effect id CSS元素。

我尝试了ToggleClass参数，但无法使其工作。

谢谢骚扰

.st-effect-12.st-container {
  -webkit-perspective: 1500px;
  perspective: 1500px;
}
.st-effect-12 .st-pusher {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.st-effect-12.st-menu-open .st-pusher {
  -webkit-transform: rotateY(-10deg);
  transform: rotateY(-10deg);
}
.st-effect-12.st-menu {
  opacity: 1;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
}
.st-effect-12.st-menu-open .st-effect-12.st-menu {
  visibility: visible;
  -webkit-transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.st-effect-12.st-menu::after {
  display: none;
}
<button data-effect="st-effect-12" style="left: 0px; top: 0px;"><i class="fa fa-bars fa-2x"></i>
</button>

提前谢谢！

以下是使用toggleClass:的基本实现

$('button').on('click', function () {
    var button = $(this);
    button.toggleClass(button.data('effect'));
});
button {
    left: 0px;
    top: 0px;
    height: 56px;
}
button.st-effect-12 {
    background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<button data-effect="st-effect-12"><i class="fa fa-bars fa-2x"></i>
</button>

在您的情况下，您应该为jquery 使用id或class

HTML

 <button data-effect="st-effect-12" style="left: 0px; top: 0px; height: 56px;"><i class="fa fa-bars fa-2x" id="clickme"></i></button>

CSS

 .activate{
   background-color:red;
 }

JS-

$('#clickme).click(function(){
 $(this).addClass('activate');
},function(){
 $(this).removeClass('activate');
});

我现在不能测试这个，但可能对你有用。。

相关文章：