0

以下のコードは、1 つの Reveal/Hide Text プロセスで正常に動作します。

<div class="reveal">Click Here to READ MORE...</div>
<div style="display:none;">

<div class="collapse" style="display:none;">Collapse Text</div>

ただし、このコードが複数回複製されると、Collapse Text が表示されて消えず、実際には Expand と競合して、必要に応じて折りたたむのではなく、さらに多くのテキストを表示します。

このhttp://jsfiddle.net/syEM3/4/ で、Click Here to READ MORE... のいずれかをクリックします。Collapse Text が段落の下部に表示され、消えないことに注意してください。折りたたみをクリックすると、さらにテキストが表示されます。

これを防ぎ、正常に機能させるにはどうすればよいですか?

4

4 に答える 4

0

わかりました、問題に対して別のアプローチをとるべきだと思います。

jQueryには基本的に2つの目的があります。

  • HTML ページから 1 つ以上の DOM 要素を選択する
  • 選択した要素を何らかの方法で操作する

jQuery関数は連鎖可能であるため、これは複数回繰り返すことができます（これは、関数の後に関数の後に関数を呼び出すことができることを意味します...）。

私があなたの問題を正しく理解していれば、あなたはブログ投稿のリストを作成し、それらのティーザーのみを表示しようとしています。
ユーザーが「続きを読む」ボタンをクリックすると、記事全体が展開されます。

覚えておいてください: jQuery は、CSS が行うのと非常によく似た要素を選択します。これにより、特定の要素に対するクエリを非常に簡単に作成できますが、フォーマット上の理由と同様に、適切な方法で HTML を構成する必要があります。

したがって、記事ごとにこの基本的なマークアップを使用することをお勧めします (注意してください、HTML5 が機能しています!)。

<article class="article">
    <section class="teaser">
        Hey, I am a incredible teaser text! I just introduce you to the article.
    </section>
    <section class="full">
        I am the articles body text. You should not see me initially.
    </section>
</article>

article必要に応じて、要素とsection要素を要素に置き換えることができdivます。

このマークアップの CSS は次のとおりです。

/* In case you want to display multiple articles underneath, separate them a bit */
.article{
    margin-bottom: 50px;
}

/* we want the teaser to stand out a bit, so we format it bold */
.teaser{
    font-weight: bold;
}

/* The article body should be a bit separated from the teaser */
.full{
    padding-top: 10px;
}

/* This class is used to hide elements */
.hidden{
    display: none;
}

マークアップと CSS を作成した方法により、複数の記事を下に置くことができます。

お気づきかもしれませんが、「続きを読む」ボタンや「折りたたむ」ボタンを完全に省略しました。これは意図的に行われます。

誰かが JavaScript を無効にしてブログ サイトにアクセスすると (検索エンジンや JS をサポートしていない古い携帯など)、ロジックが壊れてしまいます。また、「続きを読む」や「折りたたむ」などの多くのテキスト スニペットは、実際には何も行わず、記事の一部ではない場合、関連性がありません。

hiddencss クラスをどこにも適用していないため、最初は記事の本文は隠されていません。それを HTML に埋め込んだとしても、本当に JavaScript を持っていない人は何も読めないでしょう。

jQuery マジックの追加

ページの下部では、Google CDN から jQuery ライブラリを埋め込んでいます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

これはベスト プラクティスであり、通常はページの読み込み時間が短縮されます。多くの Web サイトがこの URL を介して jQuery を埋め込んでいるため、既に訪問者のブラウザー キャッシュにある可能性が高く、再度ダウンロードする必要はありません。

http:URL の先頭の が省略されていることに注意してください。これにより、ブラウザーはページの現在のプロトコルを使用するようになりhttpますhttps。httpプロトコル経由で jQuery lib を Web サイトに埋め込もうとするとhttps、一部のブラウザは安全でない接続からのファイルのダウンロードを拒否します。

jQuery をページに含めたら、ロジックをスクリプト タグに追加します。通常、ロジックを別のファイルに保存します (これもキャッシュとすべてではありません) が、今回はスクリプト ブロックで問題ありません。

最後にいくつかの JavaScript

fullティーザーのみを表示したままにする必要があるため、最初は css-class を使用してすべての要素を非表示にします。これは jQuery を使用すると非常に簡単です。

$('.full').hide();

スクリプトの冒頭では、$('.full')jQuery に次のように伝えています。CSS-class を持つすべての要素が必要fullです。次に、その結​​果に対して関数を呼び出しますが、そのhide()目的は明らかです。

次のステップでは、すべてのティーザーの横に「続きを読む」ボタンを追加します。それも簡単な作業です。

$('.teaser').after('<button class="more">Read more</button>');

css-class ですべての要素を選択し、各要素にteaserいくつかの HTML コードを追加しますafter()- css-class でボタンmore。

次のステップでは、この新しく作成されたボタンのすべてのクリックを監視するように jQuery に指示します。fullユーザーがクリックしたら、クリックされたボタンの後にcss-class を持つ次の要素を展開したいと考えています。

$('.more').on('click', function(){
    //"this" is a reference to the button element!
    $(this).slideUp().next('.full').slideDown();
});

ふぅ、私たちはここで何をしましたか? まず、thisクリックされたボタンへの参照である を操作したいことを jQuery に伝えました。次に、そのボタンを (もう必要ないので) ゆっくりと非表示にするように jQuery に指示しましたslideUp()。

すぐに、jQuery に何をすべきかを伝え続けました。next()要素を ( css-class でfull) 取り、 で下にスライドさせて表示しslideDown()ます。

これが jQuery チェーンの力です。

再び隠れる

しかし、待ってください。記事を再び折りたたむことができるようにしたかったのです。そのため、「折りたたむ」ボタンも必要で、JavaScript もいくつか必要です。

$('.full').append('<button class="collapse">Collapse text</button>');

after()注:このボタンを追加するために関数を使用しませんでしたが、ボタンをその隣ではなくappend()、 css-class を持つすべての要素の内側に配置する関数を使用しました。fullこれは、全文とともに折りたたみボタンも非表示にしたいためです。

ここで、ユーザーがこれらのボタンのいずれかをクリックしたときのアクションも必要です。

$('.collapse').on('click', function(){
    $(this).parent().slideUp().prev('.more').slideDown();
});

さて、これは簡単でした: ボタン要素から始めて、そのparent()要素 (全文を含む要素) にフォーカスを移動し、jQuery に で上にスライドさせてその要素を非表示にするように指示しslideUp()ます。

more次に、テキストを展開するときに非表示になっている展開ボタンであるcss-class を使用して、フルテキスト コンテナーから前の要素にフォーカスを移動します。を呼び出して、そのボタンを再びゆっくりと表示しますslideDown()。

それだけです:) jsBin
に私の例をアップロードしました。

于 2013-03-20T10:16:50.040 に答える
0

あなたのコードで

 $('.reveal').click(function() {
    $(this).slideUp(100);
    $(this).next().slideToggle();
    $(".collapse").slideDown(100);
 });
 $('.collapse').click(function() {
    $(this).slideUp(100);
    $(this).prev().slideToggle();
     $(".reveal").slideDown(100);
 });

この2行は、指定されたクラスのすべての要素に作用するため、あなたが望むことをしません

     $(".reveal").slideDown(100);
    $(".collapse").slideDown(100);
于 2013-03-12T22:48:45.287 に答える
0

2 つの slideDown 関数呼び出しは、現在行っている .reveal や .collapse に固有のものではありません。すなわち

$(".collapse").slideDown(100);

ページ上のクラス .collapse を持つすべての要素を見つけて、それらを下にスライドさせます。クリックした要素に関係なく。

クリックしたばかりの要素に関連するようにslideDown呼び出しを変更します。つまり、このようなものです

$('.reveal').click(function() {
    $(this).slideUp(100);
    $(this).next().slideToggle();
    $(this).next().next(".collapse").slideToggle(100);
});
于 2013-03-12T22:49:27.613 に答える
0

すると$(".collapse").slideDown(100);、jQuery は、現在の this に関連するものだけでなく、.collapse クラスを持つすべてのものに対して slideDown を実行します。これを修正するには、その場所に基づく折りたたみを参照してください$(this)。

これを行い、次のようなものを使用します$(this).siblings(".collapse").slideDown(100);

この特定のセレクターは、各テキスト ブロックを独自の div で囲む場合にのみ機能することに注意してください。現在のように、独自の div 内の各テキスト要素を使用して、クラス.siblings(".collapse")のすべての兄弟を選択すると、引き続き両方の要素が選択されます。$(this)collapsecollapse

于 2013-03-12T22:59:13.167 に答える