0

「続きを読む」リンクをクリックした後、jQueryを使用してページのコンテンツをスライドダウンして表示しています。アニメーションはうまく機能しますが、表示されているコンテンツは、リンクがクリックされた直後、アニメーション化されたスライドダウンの前に表示されます。面白いのは、他のいくつかのサイトでこのコードを使用したことがあり、この問題が発生したことがないことです。

コードは次のとおりです。

<script type="text/javascript">

function ShowHide(){
$(".details").animate({"height": "toggle"}, { duration: 500 });
}

</script>

とhtml

<div class="readmore"><a href="#" onclick="ShowHide(); return false;">More Info</a></div>            
    <div class="details">
        <div class="description">
         <div class="title">Description</div>
          <p>content here</p>

         <div class="title">Subscribe</div>
         <a href="#">lorem</a><br />
         <a href="#">lorem</a>
        </div>
    </div>

どんな助けでも素晴らしいでしょう！また、補足として、このスライドダウンの複数のインスタンスを1ページに表示したい場合があります。今すぐ「続きを読む」リンクをクリックすると、すべての「詳細」divが表示されます。インスタンスごとに新しいコードを記述せずに、単一のdivでこれを機能させるにはどうすればよいでしょうか。私がそれを望む例は、投稿のリスト内の投稿からの詳細を明らかにするワードプレスサイトです。

4

1 に答える 1

0

divコンテンツを含むもの (あなたの場合、クラス「詳細」を持つもの) にもoverflow: hiddenCSS スタイルが設定されていることを確認してください。

2 番目の質問に答えるには、次のようにします。

$(document).ready(function() 
{ 
    //Bind the ShowHide function to onclick for each first link in the "readmore" div
    $('div.readmore > a').click(ShowHide);
});

function ShowHide(event)
{
    //Find the next "details" div sibling below the link container and animate it
    $(event.target).parent('div.readmore').next('div.details').animate(
        {"height": "toggle"}, { duration: 500 });
}

また、これを使用する場合は、リンクに割り当てられたインラインの「onclick」ハンドラを必ず削除してください。

于 2011-05-14T23:37:39.403 に答える