Question

现在我有一个评论日志列表，我目前正在切换此列表以显示更多评论或隐藏一些评论。

在我放入这个jquery来显示/隐藏一些列表之前，我有一个.review包裹的:last-child { border: none; }的css，它一直有效，直到我放入这个jquery。< / p>

我的问题是为什么当我实现这个jquery时，这个css选择器突然出现在我的样式表中？我也试着在jquery做最后一个孩子，因为它也没有在那里工作。

function reviewlistCutoff() {
    var hiddenReviews = $('.reviewWrap:gt(6)').hide();

    if (hiddenReviews.size() > 0) {
        var showCaption = '...' + hiddenReviews.size() + ' More Reviews';
        $('.reviewsList').append(
        $('<span class="toggler">' + showCaption + '</span>').toggle(

        function () {
            hiddenReviews.show();
            $(this).text('...Fewer Reviews');

        }, function () {
            hiddenReviews.hide();
            $(this).text(showCaption);
        }));

    }
}

Answer 1

.reviewWrap:last-child工作正常。

问题是你隐藏了最后5个.reviewWraps - 而最后一个是:last-child正在选择的内容。

您真正想要的是从最后一次可见 border-bottom中删除.reviewWraps。

幸运的是，有一种更好的方法可以解决这个问题。

您可以切换为使用border-top和:first-child代替：

http://jsfiddle.net/TJctn/6/

.reviewWrap { border-top: 1px solid #C9C9C9; margin: 0 0 20px; padding: 0 0 20px; }      
.reviewWrap:first-child { border-top: 0; margin: 0; padding: 0; }

您的第一个.reviewWraps将移除border-top。

我不完全确定你要对margin和padding做些什么，但你应该能够将它们调整到完美。

Jquery与css最后一个孩子发生冲突

1 个答案: