toggleClass 和 slideToggle 的 jQuery 关闭按钮未按预期工作答案

【问题标题】：jQuery close button for toggleClass and slideToggle not working as expectedtoggleClass 和 slideToggle 的 jQuery 关闭按钮未按预期工作
【发布时间】：2013-05-08 23:59:31
【问题描述】：

我有一个简单的滑动切换设置，我想添加一个关闭按钮，但 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，但这也不起作用。我哪里做错了？

【问题讨论】：

标签： jquery removeclass toggleclass

【解决方案1】：

h2 不在.toggleContent 内，也没有与关闭按钮相关联，所以试试这个 (demo)

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

【讨论】：

太棒了！这正是我的想法（.prev()），但似乎找不到答案。太感谢了！！也感谢你的简短解释......这对像我这样的 n00bs 真的很有帮助:)

【解决方案2】：

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

这个小提琴应该可以做到：
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>

【讨论】：

谢谢，但这并不能回答问题。我想知道如何使用“关闭”链接来获取一个已打开并添加了类以关闭并删除这些类的 div。
这里是您更新和澄清的问题的工作小提琴：jsfiddle.net/acturbo/huuML/1

【解决方案3】：

你没有选择元素；最近的() 将永远找不到 h2。

试试这个：

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

小提琴：

http://jsfiddle.net/Gw63h/

【讨论】：