Question

这是我的第一个问题，我很感激回答：）

我有一个问题是将一个类“.outro”与JQuery一起添加到mega-dropdown.Im刚开始学习，我无法找到解决方案......我需要的是下一个：当我点击.poslovni时，我想在.mega-dropdown上添加或切换类.intro，我做过的女巫，但我还想删除该类，并在再次点击.poslovni时将类.outro添加到.mega-dropdown中。 .Basicaly，下拉打开时我需要动画，我需要在下拉关闭时... 我希望我能尽快得到答案，谢谢！

基本示例： HTML

angular.js:38Uncaught Error: [$injector:modulerr]  angular.js:38

CSS

<div class="poslovni">
    <div class="mega-dropdovn">
    </div>
</div>

和一些看起来像JQUERY

的人

.mega-dropdown {
display: none;
position: absolute;
top: 0px;
left: 8%;
width: 84%;
box-shadow: 0px 6px 18px -8px rgba(0, 0, 0, 0.95);
opacity: 0;
visibility: hidden;
background: #000;
}

.intro {
display: block;
opacity: 0.8;
visibility: visible;
animation: animate 400ms ease-in forwards;
transform-origin: top left;
}
@keyframes animate {
 0% {
 transform: rotateX(-90deg);
 }
 100% {
 transform: rotateX(0deg);
 }
}
.outro {
display: block;
opacity: 0.8;
visibility: visible;
animation: ani 400ms ease-in forwards;
transform-origin: top left;
}
@keyframes ani {
 0% {
  transform: translateY(0px);
 }
 100% {
  transform: translateY(300px);
 }
}

再次感谢您的时间......

http://codepen.io/Bogdan986/pen/QKobEz

Answer 1

$(element).toggleClass("intro outro");

这将删除类简介并添加类outro。如果你再次这样做，它将删除类outro并包括类介绍。希望你想要这个

Answer 2

试试这个：

$(function() {
    var disp = true;
    $(".poslovni").on('click', function() {
        $( ".mega-dropdown" ).toggleClass(function(){
            if (disp) {
                disp = false;
                $(this).removeClass('outro');
                return 'intro';
            } else {
                disp = true;
                $(this).removeClass('intro');
                return 'outro';
            }
        });
    });
});

添加类然后删除它以使用jquery添加另一个类

2 个答案: