2010-02-19 5 views
1

Я использую jquery для отображения/скрытия своих комментариев в своем блоге. Я показываю пузырь, кроме названия сообщения, отображающего количество комментариев. При нажатии на этот пузырь комментарии появляются в нижней части сообщения.jquery перейти к разделу или части сообщения

Моя проблема в том, что если сообщение длинное (как правило, оно имеет тенденцию быть), пользователь не имеет понятия, что раздел комментария появляется под сообщением. Есть ли способ перейти к этой секции комментариев в нижней части сообщения? Я использую функцию переключения следующим образом:

var $j = jQuery.noConflict(); 
     $j(".post-comments").addClass("hidden"); //hide all comments on page 
     $j(".post-comments-count").toggle(
       function() { 
        $j(this).parent().parent().find(".post-comments").removeClass("hidden"); 
        /* alert('should slide down'); 
        $j(this).parent().parent().find(".post-comments").slideDown("slow");*/ 
       }, 
       function() { 
        $j(this).parent().parent().find(".post-comments").addClass("hidden"); 
        /* alert('should slide up'); 
        $j(this).parent().parent().find(".post-comments").slideUp("slow"); */ 
       } 
     ); 

Пара вещей:

  • небось одно решение было бы добавить суффикс #Link для тега привязки пузыря? проблема, однако, была бы при нажатии на нее снова, она не будет работать слишком хорошо при закрытии раздела комментариев?
  • Да, я знаю, что как только вы его откроете, вы можете только закрыть раздел комментариев, нажав на пузырь сверху, что большинство людей не потрудится делать. Тем не менее, я готов жить с этим.

(не связанные непосредственно)

  • Я прокомментировал функцию слайд-вниз, потому что по какой-то бл ** ду почему мой JQuery conks выключен, когда в WordPress и не соскользнуть обратно. Следовательно, прямое добавление и удаление классов.
  • Если вы хотите живой пример, вы всегда можете проверить это в моем блоге: kaushikgopal.com/blog

ответ

1

Простой способ сделать свиток вы говорите (в том числе гладкой анимации) является на код ниже:

var comment_div = $j(this).parent().parent().find(".post-comments"); 
comment_div.removeClass("hidden"); 

var targetOffset = comment_div.offset().top; 
$j('html,body').animate({scrollTop: targetOffset}, 1000); 

Первая часть, очевидно, является лишь переписывание существующего изменения класса, но также сохраняет ссылку на элемент комментария DOM, который вы просто не скрывали.

Вторая часть вычисляет вертикальное смещение от верхней части тела HTML до вершины комментария div. Затем он прокручивает страницу до этой позиции смещения, анимированной за 1сек (или 1000 мсек). Регулируя значение targetOffset, вы можете настроить, где на экране прокручивается пользователь.

+0

Thanks Mark, ваше решение работает как шарм. Хотя по какой-то странной причине переменная comment_div, похоже, не делает трюк для переключения. Если используется полный тег селектора - $ j (this) .parent(). Parent(). Find (". Post-comments") - он работает. Не знаю, почему. Постараюсь понять это. ура –

0

Вы можете перейти к якорю в JavaScript с использованием хэш-свойство window.location. Таким образом, вы можете перемещаться при расширении комментариев, но не перемещаться при их закрытии (или переходить к другому тегу привязки, например, к заголовку главной записи).

Смежные вопросы