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>

任何帮助都会很棒！另外附带说明一下，我可能希望在一页上有多个此幻灯片的实例。现在单击“阅读更多”链接将显示所有“详细信息” div。我将如何在一个 div 上完成这项工作，而不必为每个实例编写新代码。我想要的一个例子是一个 wordpress 网站，它在帖子列表中显示帖子的详细信息。

4

1 回答 1

0

确保div包含内容的内容（在您的情况下是具有“详细信息”类的内容）也具有overflow: hiddenCSS 样式集。

要回答你的第二个问题，你可以这样做：

$(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 回答