JQuery & Wordpress - Скрыть несколько div внутри уникального идентификатора?

Question

Я пытаюсь написать короткий комментарий Wordpress JQuery для Wordpress, который позволил бы пользователям включать и выключать определенные комментарии. Это мой первый сценарий, и мне тяжело.

В «comment_options» DIV - это серия кнопок, которые управляют отдельными комментариями (ответ, цитата, редактирование, закрытие и т. Д.). Кнопка закрытия - это то, для чего я пытаюсь написать этот скрипт. Мне нужно, чтобы он переключал DIV «gravtar» и «comment_content», но оставлял остальное на месте, чтобы он по-прежнему отображал ID пользователя и элементы управления.

Однако я не могу понять, как сдерживать действие.

[РЕДАКТИРОВАТЬ] Вот обновленный код:

// Custom comments callback
    function steelfrog_comments($comment, $args, $depth) {
        $GLOBALS['comment'] = $comment; ?>

        <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>" class="comment_comment">

            <div class="comment_info">  

                <div class="gravatar">
                    <?php echo get_avatar($comment,$size='80',$default='<path_to_url>' ); ?>
                </div>

                <div class="comment_poster">
                    <h5><?php comment_author_link(); ?></h5>
                    <span><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></span>
                </div>

                <div class="comment_options">
                    <ul class="options">
                        <li class="reply"><a href="#" title="Reply to this comment"><span>Reply to this comment</span></a></li>
                        <li class="quote"><a href="#" title="Quote and reply this comment"><span>Quote this comment</span></a></li>
                        <li class="link"><a href="#" title="Link to this comment"><span>Link to this comment</span></a></li>
                        <li class="website"><a href="#" title="Website of commentor"><span>Website of commentor</span></a></li>
                        <li class="edit"><a href="#" title="Edit this comment"><span>Edit this comment</span></a></li>
                        <li class="close"><div class="trigger"><a href="#" title="Remove this comment until the page is refreshed"><span>Remove this comment until the page is refreshed</span></a></div></li>
                    </ul>
                </div>
            </div>

            <div class="comment_content">
                <?php comment_text() ?>
            </div>
        <?php } 

И текущий скрипт JQuery:

$(document).ready(function(){
    $("div.trigger").click(function() {
        $(this).parent.parent("li").children(".gravatar, .comment_content").slideToggle();
    });
});

[РЕДАКТИРОВАТЬ] Работает с помощью двух отдельных селекторов, но это ужасно.

$(document).ready(function(){

    $(".trigger").click(function(){
        $(this).parent().parent().parent().parent().parent().children(".gravatar, .comment_content").slideToggle('300');
        $(this).parent().parent().parent().parent().children(".gravatar").toggle('300');
        return false
    });

});

Answer 1

Вы хотите найти элементы div по отношению к элементу триггера, например:

$("div.trigger").click(function() {
  $(this).closest("li:not(.close)")
         .find(".gravatar, .comment_content").slideToggle();
});

Это поднимается к <li>, обертывающему .trigger, затем ищет те элементы внутри него.

То, что у вас было раньше, например: $("div.gravatar"), ищет все <div class="gravatar">, а не только внутри определенного элемента, вот что изменится приведенный выше код.

Answer 2

почему бы просто не спрятать полный div.trigger? ^^ хорошо, может быть, это не работает для вас ... Вы могли бы сделать

$("div.trigger").click(function() {
    $("div.trigger > div").slideToggle();
});

это скроет все div'ы под div.trigger