Question

我希望div if等级的动画等于有效，否则我希望tabItem成为top: 0; - 我遇到的问题是其他似乎没有被解雇了，我无法解决原因。

期望的效果是一次只有一个项目处于活动状态，只有活动项目具有负顶部位置。

有关工作示例，请参阅：http://codepen.io/anon/pen/xIovs

jQuery：

 var tabItem = $(".tab--hobbit");

        function closeTab(){
            tabItem.removeClass("active");
        }

        tabItem.click(function(event) {
            event.preventDefault();

            closeTab();
            $(this).addClass("active");

            if ($(this).hasClass('active')) {
                $(this).animate({
                    top: -168
                });
            } else {
                $(tabItem).animate({
                    top: 0
                });
            }

        });

Answer 1

这是因为你正在调用addClass()，这会导致将类添加到元素中（如果它不存在）

var tabItem = $(".tab--hobbit");

tabItem.click(function (event) {
    event.preventDefault();

    tabItem.not(this).removeClass("active").animate({
        top: 0
    });
    $(this).toggleClass("active");
    $(this).animate({
        top: $(this).hasClass('active') ? -80 : 0
    });

});

同样，closeTab方法存在问题，您应该从当前元素以外的所有元素中删除活动类，如上所示

Answer 2

你有：

$(this).addClass("active");

if ($(this).hasClass('active')) {

所以当然总是上课活动..

Answer 3

我刚把你的其他部分代码移到了CloseTab。我认为它有效。

    function closeTab(){
        tabItem.removeClass("active");
            $(tabItem).animate({
                top: 0
            });

    }

    tabItem.click(function(event) {
        event.preventDefault();

        closeTab();
        $(this).addClass("active");

            $(this).animate({
                top: -168
            });

    });

jQuery如果class是x做某事，否则做别的事

3 个答案: