Использование closest () для показа только контента по нажатому заголовку

0

У меня есть следующий 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/

Как я могу это исправить?.

  • 0
    Вы пытались просто с помощью функции .toggle () в вашем выражении клика? См. Api.jquery.com/toggle
Теги:

3 ответа

1
Лучший ответ

Вы не можете просто использовать.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();
    }
});

Демо: скрипка

Это может быть намного упрощено

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

Демо: скрипка

Поделиться
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');
    }
});

ДЕМО здесь.

ИЛИ:

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

ДЕМО здесь.

Поделиться
1

Я бы предложил использовать класс, чтобы определить, скрыта ли она или нет:

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

ИЛИ

Просто используйте уже существующий селектор, чтобы скрыть его:

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

[data-toggled='off'] .the_post_teaser {
display:none;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню