切换添加删除类答案

【问题标题】：Toggle add remove a class切换添加删除类
【发布时间】：2014-04-11 15:38:59
【问题描述】：

嗨，我正在学习 Jquery。

单击链接时，我想向父 div 添加和删除“卡片打开”类。在第一次单击时，将添加类。但是当我再次单击时，该类不会被删除。我做错了什么？

$(document).ready(function () {
$('.toggle-box').hide();

$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle-box')
    $('.toggle-box').not(elem).hide();
    elem.toggle('slow');

    var parent_div = $(this).parent().addClass('card-open');
    $('.card').find('div').not(parent_div).removeClass('card-open');
});
});

HTML：

          <div class="card">


          <h3><a href="">Title</a></h3>
          <h4>date</h4>


          <a href="#" class="togglelink"></a>
          <div class="toggle-box">
            <p>Description</p>
            <p><strong>Employee Count:</strong> 5</p>
          </div>


          <img src="assets/img/open-arrow.svg" alt="Open Event">


      </div>

【问题讨论】：

只要使用.toggleClass()
你能提供你的 HTML 标记吗？
可以看到.toggleClass()here的一个很好的例子
更新了 html 标记

标签： jquery class toggle

【解决方案1】：

以下是基于修复的有用反馈：

$(document).ready(function () {
$('.toggle-box').hide();

$('a.togglelink').on('click', function (e) {
    e.preventDefault();
    var elem = $(this).next('.toggle-box')
    $('.toggle-box').not(elem).hide();
    elem.toggle('slow');

    var parent_div = $(this).parent().toggleClass('card-open');

});
});

【讨论】：

【解决方案2】：

根据您的信息。只需使用 toggleClass 并定位 .parent() div。

这是一个工作小提琴：http://jsfiddle.net/h2K7T/1/

HTML：

<div class="card">
    <h3><a href="">Title</a></h3>
    <h4>date</h4>
    <a href="#" class="togglelink">Link</a> <!-- Your link was empty -->
    <div class="toggle-box">
        <p>Description</p>
        <p><strong>Employee Count:</strong> 5</p>
    </div>
    <img src="assets/img/open-arrow.svg" alt="Open Event">
</div>

JS：

$(document).ready(function () {
    $('.toggle-box').hide(); // This should really just be done with CSS instead. 

    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        $(this).parent('div').toggleClass('card-open');
    });
});

注意：如果您在页面底部加载 jQuery 和脚本，则不需要 document.ready，因为您的 DOM 已经加载。

【讨论】：