0

我有一个简单的滑动切换设置，我想添加一个关闭按钮，但似乎 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");
 });

在这里提琴

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

4

3 回答 3

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>
于 2013-05-09T00:10:52.877 回答
1

h2不在里面，.toggleContent也不与关闭按钮相关联，所以试试这个（演示）

$(".closeIt").click(function (e) {
    e.preventDefault();
    $(this).closest(".toggleContent")
        .slideUp("fast")
        .removeClass("active")
        .prev("h2.titleTrigger").removeClass("active");
});
于 2013-05-09T00:26:18.407 回答
1

您没有选择元素；最接近（）将永远找不到 h2。

试试这个：

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

小提琴：

http://jsfiddle.net/Gw63h/

于 2013-05-09T00:35:05.930 回答