Question

嗨，我正在学习Jquery。

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

$(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>

Answer 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');

});
});

Answer 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已经加载。

切换添加删除一个类

2 个答案: