jQuery addClass到 <li> 当<a>点击</a>

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

添加父母（）。 在李上添加类

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()添加和删​​除li class

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