0

私はしばらくの間作成しようとしていた機能に苦労してきました。ここでの考え方は、ユーザーには小さなサムネイルと見出し、および投稿者情報が表示されるということです。次に、見出しをクリックして記事に展開するか、[コメント]リンクをクリックして記事に付けられたコメントに直接展開します。または、必要に応じて、見出しをクリックしてコメントを表示し（記事に展開）、[コメントの表示]をクリックします（コメントに展開します）。結局、最新のニュースを表示するためのモジュール式でありながら柔軟で機能的な開閉システム。

これが私が取り組んできたものです:(私はすべてのコードを1つの場所に置いたので、誰でもこれを見て見やすくなりました）http://notedls.com/pointtest.html

これは私が狙っているものですが、私が望んでいるものとはほど遠いです;（1.8が出ているjQuery 1.6プラグインを使用していますが、私はこれでマスターまたはエキスパートになるにはほど遠いので、私はできなかったと思いますゼロから構築します。このプラグインをこのように機能させるためにすでに編集しましたが、ご覧のとおり、AUTHORとCommentsがファンを襲い始めています;;コードが「ATAG」を呼び出しているためです見出し用;これは見出しです。

誰かが私が想像していることを達成するためのより簡単な方法、またはこの現在のコードを修正するための可能な方法を知っていますか？私はこの時点でかなり必死です;;

4

2 に答える 2

0

ああ、わかった気がする

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

隠しCSSクラスを使用します

.hidden {
    display:none;
}
于 2010-04-07T00:25:41.870 に答える
0

このようなもの：？

http://jsbin.com/elawu

代替テキスト

それはアコーディオンです。各「最初の要素」またはヘッダーはdivです。そのヘッダー内には、記事の見出し、著者、およびその記事のコメント数をリストしたクリック可能なスパンがあります。

各「2番目の要素」、つまりアコーディオンのコンテンツ部分もdivです。その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内のコメントリンクをクリックすると、実際のコメントが切り替わります。

于 2010-04-07T05:26:06.287 に答える