0

我有一个“post”类的 div，里面有一堆没有指定高度的文本。

.post {
    width: 100%;
    margin: 0 0 2% 0;
    background-color: #AAA;
    overflow: hidden;
}

使用 jQuery，我想最初添加第二个类“postLess”，指定高度为 300 像素。因此隐藏了部分文本。

.postLess {
    height: 300px;
}

单击“阅读更多”按钮时，我想删除“postLess”并添加“postMore”，以便将高度设置为“auto”并显示全文。

.postMore {
    height: auto;
}

然后我当然希望它在第二次单击按钮时删除类“postMore”并添加回类“postLess”。这是我的 jQuery。我究竟做错了什么？

    $('.post').addClass('postLess');
    $('.readMore').click(function() {
        if ($('.post').hasClass('postLess')) {
            $('.post').removeClass('postLess').addClass('postMore');
        }
        else if ($('.post').hasClass('postMore')) {
            $('.post').removeClass('postMore').addClass('postLess');
        }
    });

这是我的 HTML 的重要部分，一直到前两个“.post”

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Switchback</title>
        <link href="css/styles.css" type="text/css" rel="stylesheet">
        <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
    </head>
    <body>
        <header>
        </header>
        <div id="content">
            <div id="sidebar">
                <p>
                    Ut neque tellus, dapibus bibendum tempor quis, gravida vitae nisl.     Pellentesque erat elit, ullamcorper in accumsan id, ullamcorper in lectus. Nullam nec augue 
                </p>
                <p>
                    Nunc facilisis lacus vel enim fringilla consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vitae sem mauris. 
                </p>
            </div> <!-- end div id="sidebar" -->
            <div id="posts">
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic1.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse purus lorem, viverra sed blandit non, vulputate in sem. Donec laoreet turpis id lectus 
                        <a href="javascript:;" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>
                <div class="post">
                    <div class="postImg" style="background-image: url('img/pic2.png');">
                    </div>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec felis 
                    </p>
                    <p>
                        Sed ornare, velit ac dignissim lacinia, dui mauris suscipit enim, quis viverra metus elit id quam. Sed quis tellus nulla. Nam pulvinar ante at felis lobortis eleifend. 
                        <a href="#" class="readMore">read&nbsp;more&nbsp;&raquo;</a>
                    </p>
                </div>
4

3 回答 3

2

如果元素以一个类开始，并且您想删除该类并添加一个不同的类，反之亦然，只需使用 toggleClass() 切换两个类，它应该为您完成这项工作：

$('.readMore').on('click', function() {
    $('.post').toggleClass('postLess postMore');
});

如果有多个.post元素，则需要单独定位它们。

如果 .post 元素是 .readMore 元素的父元素，则可以使用 close() ：

$('.readMore').on('click', function() {
    $(this).closest('.post').toggleClass('postLess postMore');
});

如果是孩子，您可以使用 context ：$('.post', this).toggleClass('postLess postMore');

于 2013-01-30T09:59:25.040 回答
0

这是一种更有效的方法，只需将类切换为关闭 no if 语句

$('.post').addClass('postLess');
    $('.readMore').click(function() {
           $('.post').toggleClass('postLess postMore');
            return false;      
    });

此外，如果您的帖子更多按钮位于帖子 div 中，您可以执行以下操作。这意味着您可以让 post div 的多个实例独立运行。

$('.post').addClass('postLess');
        $('.readMore').click(function() {
               $(this).parent().toggleClass('postLess postMore');
               return false;      
        });
于 2013-01-30T10:00:27.280 回答
0

您只需要针对您要阅读的帖子进行操作，不要使用$('.post')而是使用$(this).parents('.post')。

所以完整的解决方案是：

$('.readMore').on('click', function() {
    $(this).parents('.post').toggleClass('postLess postMore');
});

是wordpress博客吗？我非常喜欢这个主意，我可以试试我的！

于 2013-01-30T10:00:47.877 回答