2010-04-06 3 views
0

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

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

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

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

+0

http://jqueryui.com/demos/tabs/ не тот, что вы ищете? – vittore

+0

Невозможно развернуть каждый блок. Это то, что я снимаю, расширяя поле для просмотра дополнительной информации. Проблема, с которой я столкнулась, заключается в том, что мне нужно поставить информацию «Отправлено» прямо под заголовком, но не за исключением поля с возможностью нажатия, которое расширяет аккордеон. Чтобы добавить к нему, мне нужно каким-то образом сделать так, чтобы ссылка «АВТОР» и ссылка «Комментарии» (которая в настоящее время отображается, если вы нажимаете ссылку «АВТОР», не работая по назначению) не расширяет поле, а действует как собственный элемент. – Josh

ответ

0

Что-то вроде этого :?

http://jsbin.com/elawu

alt text http://i41.tinypic.com/3518lxg.jpg

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

Каждый «второй элемент», или часть содержимого аккордеона, также является div. Внутри этого div есть контент контента div и комментарии div. В комментарии div есть заголовок комментария, снова clickable и другой контент 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.comments div').hide(); Также аккордеон получает создан, и гармошку onaccordionchange и onaccordionchangestart событий получают оценку. Наконец, событие клика зарегистрировано для ссылок комментариев.

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

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

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

+0

Омг да! Вы, сэр, спаситель! Благодаря! – Josh

+0

На самом деле у меня есть вопрос, так как у вас есть ссылки, реагирующие таким образом, я предполагаю, что если я сделаю ссылку автора, она откроет статью, как будто ей сказали, что если я хочу направить ссылку автора на совершенно другая страница? – Josh

+0

Нажав на ссылку «comments», вы открываете вкладку аккордеона, потому что ссылка комментариев находится в «первом элементе», и щелчок в любом месте первого элемента вызывает открытие вкладки аккордеона. Вы можете видеть из кода, что я зарегистрировал дополнительное событие клика для ссылки «комментарии» - он просто устанавливает флаг, который затем ссылается на событие аккордеона 'onaccordionchange'. Вам нужно будет настроить аналогичное событие клика для автора. Вы также можете отключить аккордеонную активацию при нажатии на автора - не знаете, как это сделать. Кажется возможным. Я позволю тебе понять эту часть. – Cheeso

0

ой, я чувствую, что я получить его

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

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

.hidden { 
    display:none; 
} 
Смежные вопросы