Question

我在点击a.more时尝试向li添加一个类。但它不起作用。

        <ul>
            <li id="post-4" class="post">
                <div class="text">
                    <span class="date">12/12/2013</span>
                    <h3>The Title</h3>
                    <div class="post-excerpt">
                    <p>The excerpt will show</p>
                        <a class="more" href="#">read more..</a>
                    </div>
                    <div class="post-content">
                    <p>The full content</p>
                    <a class="less" href="#">close</a>
                    </div>
                </div>
            </li>
        </ul>

jQuery的：

jQuery(function () {
   jQuery('.post').on('click', 'a.more', function(){
       jQuery(this).addClass('active');
   });
   jQuery('.post').on('click', 'a.less', function() {
       jQuery(this).removeClass('active');
   });
});

Answer 1

添加parent（）。在li

上添加类

jQuery('.post').on('click', 'a.more', function(){
   jQuery(this).parents('li').addClass('active');
});
jQuery('.post').on('click', 'a.less', function() {
  jQuery(this).parents('li').removeClass('active');
});

尝试以上代码。

Answer 2

使用parents()添加和删除class

的li

jQuery('.post').on('click', 'a.more', function(){
    jQuery(this).parents('li').addClass('active');
});
jQuery('.post').on('click', 'a.less', function() {
    jQuery(this).parents('li').removeClass('active');
});

Answer 3

由于用户随时只能看到两个链接中的一个，因此您可以使用单个功能

jQuery('.post').on('click', 'a.more, a.less', function() {
  jQuery(this).closest('li').toggleClass('active');
});

当<a> is clicked</a> </li>时，jQuery addClass到<li>

3 个答案: