Есть ли более простой способ с аккордеонами jQuery? - PullRequest
Новая
       53

Есть ли более простой способ с аккордеонами jQuery?

0 голосов
/ 07 апреля 2010

Я боролся с функцией, которую пытался создать какое-то время. Идея заключается в том, что пользователь видит небольшой эскиз + заголовок, а также информацию, опубликованную пользователем. Затем они могут щелкнуть заголовок, чтобы развернуть статью, или щелкнуть ссылку «Комментарии», чтобы развернуть комментарии к статье. Или, если они хотят, они могут просмотреть комментарии, щелкнув заголовок (чтобы развернуть статью), затем нажмите «Просмотреть комментарии» (чтобы развернуть комментарии). Наконец, модульная, но гибкая и функциональная система открытия / закрытия для просмотра последних новостей.

Вот то, над чем я работал: (Я положил весь свой код в одном месте, чтобы его было проще увидеть, кому бы это ни понадобилось) http://notedls.com/pointtest.html

Это то, что я снимаю, но это далеко от того, чего я хочу; ( Он использует плагин jQuery 1.6, который вышел 1.8, но я далеко не мастер и не эксперт в этом, и я не думаю, что смог бы построить с нуля. Я уже отредактировал этот плагин, чтобы заставить его работать так, но, как вы можете видеть, AUTHOR и Comments начинают заставлять дерьмо попадать в фанат ;; Это потому, что код вызывает «A TAG» для заголовка; который является заголовком.

Кто-нибудь знает какой-нибудь более простой способ добиться того, что я предполагаю, или возможный способ исправить этот текущий код? Я довольно отчаянно в этот момент ;;

Ответы [ 2 ]

0 голосов
/ 07 апреля 2010

как то так?

http://jsbin.com/elawu

альтернативный текст http://i41.tinypic.com/3518lxg.jpg

Это аккордеон. Каждый «первый элемент» или заголовок является элементом div. В этом заголовке есть заголовок статьи, автор и кликабельный промежуток, в котором указано количество комментариев к этой статье.

Каждый «второй элемент», или контентная часть аккордеона, также является div. Внутри этого div есть раздел содержимого статьи и раздел комментариев. Внутри div комментариев есть заголовок комментария, снова кликабельный, и другой div контента. Иерархия выглядит следующим образом: 

<div id='outer-accordion'>
   <div class='header'>
      <p>Article headline</p>
      <p>by: Author</p>
      <p><span class='clickable'># comments</span></p>
   </div>
   <div class='content'>
      <div class='article'>...</div>
      <div class='comments'>
        <p><span class='clickable'># of comments</span></p>
        <div class='comment-content'>
           comment #1
           comment #2
           ...
        </div>
      </div>
   </div>

   ....

Когда страница запускается, все div с содержимым комментариев скрываются с помощью $('div.comments div').hide(); Также настраивается аккордеон, и события аккордеона onaccordionchange и onaccordionchangestart связываются. Наконец, событие клика регистрируется для ссылок на комментарии.

Если вы щелкнете в любом месте заголовка, откроется соответствующая вкладка аккордеонного контента. Если вы нажмете на ссылку комментариев в заголовке, она откроет аккордеон, и откроет div комментариев внутри содержимого div.

Каждый раз, когда открывается вкладка аккордеона, ссылка комментариев в заголовке скрывается. Каждый раз, когда закрывается вкладка аккордеона, отображается ссылка на комментарии в заголовке.

Нажатие на ссылку комментариев внутри div с аккордеонным содержимым переключает фактические комментарии.

0 голосов
/ 07 апреля 2010

о, я чувствую, что понял 

$('.author').click(function() {
    $(this).parent().find('.authordiv').toggleClass('hidden');
});
$('.comments').click(function() {
    $(this).parent().find('.commentsdiv').toggleClass('hidden');
});

и использовать скрытый класс CSS 

.hidden {
    display:none;
}
...