Question

我有以下html

<article class="one_post">
<section class="single_post">
<section class="the_post_title"><h3 data-toggled="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3></section>
    <section class="the_post_teaser"><p>Teaser Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.</p></section>
</section>
    <section class="entire_blog_post">
    <article class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</article>
    <article class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.
</article>
    <section class="col-sm-12 les_green about_the_author">
    <article class="blog_about_the_author"><h3>About The Author</h3></article>
    <article class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. </article>
    </section>
    <section class="les_comments">
    <article class="les_grey col-sm-12 ">20 comments</article>
    <article class="all_comments">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla non magna eu leo placerat accumsan. Maecenas cursus augue id tincidunt sagittis. Duis mattis massa sit amet ipsum laoreet, et elementum felis vulputate. Nam convallis nibh elit, ac consequat diam faucibus a. Praesent ac hendrerit mauris. Donec felis nunc, mattis a scelerisque id, euismod ut neque. Sed lobortis cursus scelerisque.
    </article>
    </section>
    <section class="the_footer">
    </section>
    </section>
    </article>

这是一篇单独的博文。我只显示帖子标题，点击属于显示标题的内容正在显示。

这是我正在使用的jquery

$('.entire_blog_post').css('display','none');
$('.the_post_title').on('click', function(){
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off'){

           $(this).attr('data-toggled','on');
           $('.the_post_teaser').css('display','none');
$('.entire_blog_post').css('display','');
    }
    else if ($(this).attr('data-toggled') == 'on'){
           $(this).attr('data-toggled','off');
           $('.the_post_teaser').css('display','');
$('.entire_blog_post').css('display','none');
    }
});

这是结果http://jsfiddle.net/thiswolf/DdjGL/8/

我正在尝试

$(this).closest('.entire_blog_post').css('display','');

但即便如此也不起作用http://jsfiddle.net/thiswolf/A4REL/1/

我该如何解决这个问题？。

Answer 1

尝试：

$('.entire_blog_post').css('display', 'none');
$('.the_post_title').on('click', function () {
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off') {

        $(this).attr('data-toggled', 'on');
        $(this).parent().find('.the_post_teaser').css('display', 'none');
        $(this).closest('.entire_blog_post').css('display', '');
    } else if ($(this).attr('data-toggled') == 'on') {
        $(this).attr('data-toggled', 'off');
        $('.the_post_teaser').css('display', '');
        $('.entire_blog_post').css('display', 'none');
    }
});

DEMO here.

OR：

$('.the_post_title').on('click', function () {
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off') {

        $(this).attr('data-toggled', 'on');
    } else if ($(this).attr('data-toggled') == 'on') {
        $(this).attr('data-toggled', 'off');
    }
    $(this).parent().find('.the_post_teaser').slideToggle();
    $(this).closest('.entire_blog_post').slideToggle();
});

DEMO here.

Answer 2

你不能只使用.closest（）因为你所定位的元素不是祖先元素，它们是兄弟元素

$('.entire_blog_post').css('display', 'none');
$('.the_post_title').on('click', function () {
    if (!$(this).attr('data-toggled') || $(this).attr('data-toggled') == 'off') {

        $(this).attr('data-toggled', 'on');
        $(this).siblings('.the_post_teaser').hide();
        $(this).closest('.single_post').next('.entire_blog_post').show();
    } else if ($(this).attr('data-toggled') == 'on') {
        $(this).attr('data-toggled', 'off');
        $(this).siblings('.the_post_teaser').show();
        $(this).closest('.single_post').next('.entire_blog_post').hide();
    }
});

演示：Fiddle

可以简化得多

$('.entire_blog_post').hide();
$('.the_post_title').on('click', function () {
    //the teaser is the next element of the tile
    $(this).next('.the_post_teaser').toggle();
    //entire_blog_post is the next sibling of the ancestor single_post element
    $(this).closest('.single_post').next('.entire_blog_post').toggle();
});

演示：Fiddle

Answer 3

我建议使用一个类来定义它是否隐藏：

.the_post_teaser{
display:none;
}

.entire_blog_post{
display:block;
}

.is-hidden .the_post_teaser {
display:block;
}

.is-hidden .entire_blog_post {
display:none;
}

然后你可以切换课程：

$(this).closest('.entire_blog_post').toggleClass('is-hidden');

OR

只需使用已存在的选择器来隐藏它：

[data-toggled='on'] .entire_blog_post {
display:none;
}

[data-toggled='off'] .the_post_teaser {
display:none;
}

使用nearest（）仅显示点击标题的内容

3 个答案: