Question

我有一个jQuery函数，它将使用toggleClass更改.flavor框的CSS，并在底部添加一些文本。我想改变它，以便当我再次单击我的框时（它已经处于活动状态），.active-text也会消失。我怎样才能做到这一点？谢谢！

$(".flavor").click(function(event) {
    $(this).toggleClass("flavor-active");
    $(this).find('.active-text').css('visibility', 'visible');
});

Answer 1

您可以使用.toggle()

执行此操作

$(this).find('.active-text').toggle()

或者，如果.active-text是.flavor的孩子，您可以像这样使用CSS：

.flavor .active-text { display:none; }
.flavor-active .active-text { display:block; /* or inline, just not hidden */ }

Answer 2

您可以查看您正在切换的课程

$(".flavor").click(function(event) {
    $(this).toggleClass("flavor-active")
           .find('.active-text') 
           .css('visibility', $(this).hasClass('flavor-active') ? 'visible' : 'hidden');
});

使用.css就像一个toggleclass

2 个答案: