0

さて、これは説明するのがややこしいです。私は基本的に PHP で書かれたカスタムの基本的なニュース システムを持っています。ニュースを表示する際に、jQueryを使用して「クリックして完全なニュース記事を表示」しました

ここに私のサイトのプレビューがあります。写真でもっと理解できるかもしれません:

ここに画像の説明を入力

基本的に、完全なニュース記事は 内にエコーされます。つまり、[記事全体を表示] をクリックすると、すべてのニュース記事が開きます。

誰かがこの問題を解決できたら、事前に感謝します。

<script type="text/javascript">
$(document).ready(
    function(){
        $("#show").click(function () {
            $(".news").show("slow");
        });

    });
</script>
4

4 に答える 4

1

すべての記事を表示するのではなく、特定の記事を表示したいと考えています。これを行うには複数の方法があり、主に HTML の構造に依存します。しかし、私はあなたがこれに似たものを持っていると思います:

...
<div class="article">
  <h2>Title</h2>
  <p class="summary">Short Summary of the article</p>
  <p class="news" style="display:none;">FULL ARTICLE</p>  
  <a class="reveal-btn" href="#">Click to reveal full article</a>
</div>

<div class="article">
  <h2>Title</h2>
  <p class="summary">Short Summary of the article</p>
  <p class="news" style="display:none;">FULL ARTICLE</p>  
  <a class="reveal-btn" href="#">Click to reveal full article</a>
</div>
...

jquery の次のようなものは、記事のトグル ビューごとに処理する必要があります。

$('.article .reveal-btn').click(function(e){
  $('.summary', $(this).parent()).toggle();
  $('.news', $(this).parent()).slideToggle();
});

このようなものがうまくいくはずです。

于 2013-05-11T07:58:05.703 に答える
0

あなたは.toggle()jQuery関数を求めていますか?

例えば

$('#btn-reveal-articles').click(function() {
    $('#article-div').toggle();
});

表示するコードや問題の明確な定義がなければ、何を求めているのかを判断するのは困難です。

編集：

jsFiddle で例を作成しました。リンクは次のとおりです。 http://jsfiddle.net/tU8a7/ http://jsfiddle.net/tU8a7/1/

HTML

<div class="news">
    <div class="article">
        <a href="#" class="btn-view">View article</a>
        <div class="content">
            My content for the first article
        </div>
    </div>
    <div class="article">
        <a href="#" class="btn-view">View article</a>
        <div class="content">
            My content for the second article
        </div>
    </div>
</div>

CSS

.article .content { display: none; }

jQuery

$('.btn-view').click(function() {
    $(this).closest('.article').find('.content').toggle();
});

.toggle()、 、などのトグル オプションがたくさんあり.slideToggle()ます.fadeToggle()。それぞれに速度のパラメータ オプションもあり、設定する.toggle(1000)とアニメーションが 1 秒間パディングされます。

于 2013-05-11T07:56:35.867 に答える
0

$(".news") is a class selector, so it will select all elements with that class. You will need to come up with a unique identifier for each "article" if you want them shown individually; for instance:

<a class="news-toggle" href="#article-1">Show</a>
<div id="article-1" class="news">

</div>

and

$(function(){

    $('a.news-toggle').on('click', function(e){
        var toShow = $(this).attr('href');
        $(toShow).show(); // or use slideToggle() to use same "button" to hide/show
    });

});
于 2013-05-11T08:02:17.813 に答える