Question

我有一个简单的幻灯片切换设置，我想添加一个关闭按钮，但似乎removeClass（）不起作用。

单击关闭链接时，我想返回上一个颜色（删除.active）并打开其他任何打开的颜色。换句话说，这个关闭链接应该只影响它所在的切换。我认为从标题div和内容div中删除“活动”类并向上滑动内容div是一件简单的事情。

slideUp部分工作正常，但“活动”类不会关闭或删除。

这是我的js：

$("h2.titleTrigger").click(function(e){
e.preventDefault();
$(this).toggleClass("active").next().slideToggle("fast");
return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
 e.preventDefault();
$(this).closest(".toggleContent").slideUp("fast");
$(this).closest(".toggleContent").removeClass("active");
$(this).closest("h2.titleTrigger").removeClass("active");
 });

Fiddle here

我也尝试过toggleClass而不是removeClass，但这也不起作用。我哪里出错了？

Answer 1

回答您的要求：
“关闭时，我想打开任何其他打开的东西。换句话说，这个关闭链接应该只关闭它所在的切换。”

这个小提琴应该这样做：
http://jsfiddle.net/acturbo/TpQff/1/

jquery的：

$("h2.titleTrigger").click(function(e){
    e.preventDefault();
    //$(this).toggleClass("active").next().slideToggle("fast");
    $("#mydiv").slideToggle("fast");


return false;
});

//CLOSE LINK
$(".closeIt").click(function(e){
     e.preventDefault();
    $(this).parent().slideUp("fast");
    $(this).closest(".toggleContent").removeClass("active");
    $(this).closest("h2.titleTrigger").removeClass("active");
 });

HTML

<h2 class="titleTrigger">slide it</h2>

<div id="mydiv">
    <h2 class="closeIt">close  it</h2>
    inside div
</div>

Answer 2

h2不在.toggleContent内，也不与关闭按钮相关联，因此请尝试使用demo）

$(".closeIt").click(function (e) {
    e.preventDefault();
    $(this).closest(".toggleContent")
        .slideUp("fast")
        .removeClass("active")
        .prev("h2.titleTrigger").removeClass("active");
});

Answer 3

你没有选择元素; nearest（）永远不会找到h2。

请改为尝试：

$(this).closest(".toggleContent").prev().removeClass("active");

小提琴：

http://jsfiddle.net/Gw63h/

用于toggleClass的jQuery关闭按钮和slideToggle无法按预期工作

3 个答案: