Question

目前我有一个网站可以抓取某个类别中的12个最新帖子，并将其显示为链接到其永久链接，并将后缩略图显示为链接图像。

您可以在此处查看一个有效的示例：http://mathewhood.com/sitefiles/

我想要做的是，以某种方式在我的循环中添加功能，这将允许我这样做，以便当您单击其中一个列表元素时，它将显示the_content（）;对于每个元素。

我发现了这个 - http://gsgd.co.uk/sandbox/jquery/easing/我认为可以提供我想要的功能（理想情况下是进出），但我正在努力实现它！如果有人知道我怎么能做到这一点，请回答这个并获得你当之无愧的投票！

http://jsfiddle.net/XzJgU/ - 这是我目前的循环，到目前为止，任何帮助都将非常感谢!!!!!!!!!

Answer 1

这是我解决您问题的方法。我给出了一个如何实现jquery Easing的例子。

修改请修改我的帖子的 View revised sample here 希望它有所帮助。

$('.thumbs').click(function(e){ e.preventDefault(); var contents = $(this).closest('.recentPost').find('.caption').html(); var $container = $('#theContainer').html(contents); $container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:100}, {duration: 1000, easing: 'easeInOutCirc'}); $container.click(function(){ $container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'}) $container.fadeOut('slow'); $container.html(''); }); });

Answer 2

这样的事情应该有效 - http://jsfiddle.net/XzJgU/5/。它为循环中的每个帖子呈现内容，默认情况下使用CSS隐藏。单击一个帖子后，它会将其内容移动到#display-post，使其可见。单击另一个帖子后，它会移回原始容器，并将新帖子内容移动到那里。

Answer 3

我不清楚你希望如何工作 - 你是在寻找PHP解决方案还是JavaScript解决方案，或者两者兼而有之。关于如何让它发挥作用，我有两个建议。另外，请注意，您所引用的jQuery库仅为jQuery添加了缓动选项 - 即它只处理动画而不处理代码的业务逻辑和行为。

使用ajax
这应该适用于这种情况，因为您没有提出跨域请求。基本上，您将截取链接的点击，找出它指向的位置，然后向该页面发出GET请求。然后，您将从响应中过滤掉相应的HTML并将其放入您的页面。像这样：
```
$('.recentPost a').click(function(){
    $.get($(this).attr('href'), function(data){
        //make a get request to the page the link linked to
        //and extract the blog content div
        $("placeholder").html($(data).filter(".blogRight"));
    });
    return false; //cancel the browser's default action on click to keep user on page
});
```
您的HTML页面中有<div id="placeholder" />，您希望其中显示内容。

使用PHP + JavaScript
不是按需提取内容，而是在页面加载时生成它，但保持隐藏状态。您再次拦截点击次数，但这次您会在页面上找到并显示相应的现有div。

所以你生成的页面看起来像这样：

<div id="contentWrap">
        <div class="hidden-featured-content" id="content-f12">
            <div>Your content here</div>
        </div>
        <div class="hidden-featured-content" id="content-f11">
            <div>Your content here</div>
        </div>

        <div id="newBanner"></div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=35" id="link-f12"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured12.png" class="attachment-post-thumbnail wp-post-image" alt="featured12" title="featured12" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=35"><div class="caption">
                <div class="captionTitle">Hello World 12!</div>
                <p></p>
            </div></a>
        </div>

        <div class="recentPost">
            <a href="http://mathewhood.com/sitefiles/?p=32" id="link-f11"><img width="204" height="144" src="http://mathewhood.com/sitefiles/wp-content/uploads/2011/08/featured11.png" class="attachment-post-thumbnail wp-post-image" alt="featured11" title="featured11" /></a>
            <a href="http://mathewhood.com/sitefiles/?p=32"><div class="caption">
                <div class="captionTitle">Hello World 11!</div>
                <p></p>
            </div></a>
        </div>
     ...

然后你可以使用类似的东西切换适当的内容

$('.recentPost a').click(function(){
    if($(this).attr('id')){
        var x = /link-(.*)/.exec($(this).attr('id')); //figure out which content- div to display
        $('.displayed').hide().removeClass('displayed'); //hide already displayed content
        $('#content-' + x[1]).show().addClass('displayed'); //show content and mark it as displayed
        return false;
    }
});

Answer 4

有很多方法可以实现这一目标。效率最高的可能是完整的ajax解决方案，但这需要一个Wordpress插件和一些高级脚本。

最直接的解决方案是为动态内容添加一个框，在隐藏的DIV下输出每个帖子的内容，在其永久链接/图像下，然后使用javascript将内容从隐藏的DIV移动到动态内容框中单击永久链接。我在http://jsfiddle.net/HF9Pr/处编写了一些代码。

Answer 5

试试这个：

<head>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>

<style type="text/css"> 
div.panel,p.flip
{
width: 203px;
margin: 0px;
padding-top: 9px;
padding-bottom: 9px;
padding-left: 12px;
padding-right: 12px;
background: #c1e0fb;
border-left: 1px dashed #aaa;
border-right: 1px dashed #aaa;
}
div.panel
{
height: 288px;
display: none;
border-top: 1px dashed #aaa;
}
p.flip
{
border-top: 1px dashed #aaa;
border-bottom: 1px dashed #aaa;
}
</style>
</head>

<body>

<div class="panel">
<b>sclughslru</b>
<br><br>
ertljhvij3p
<br><br>
<b>veuywihtp</b>
<br><br>
ghdjhrntnd
<br><br>
<b>ehv3rtv</b>
<br><br>
vt4k4kb76kb5
<br><br>
<b>edb3jrr3n54</b>
<br><br>
skcehgkheone
</div>

<p class="flip"><img src="https://dl-web.dropbox.com/get/Pictures/Other/up-down.jpg?w=f17ee285" style="width: 12px; height: 10px; margin-right: 10px;" />Information</p>

</body>

使用Wordpress循环的jQuery。显示/隐藏内容？

5 个答案: