Question

使用wordpress循环和jquery，我试图显示/隐藏所显示的帖子的内容。示例：用户悬停标题和标签，然后点击，内容展开。

经过一些搜索，我得出了这个结果。

$f(function(){
    $f(".portfolio-destaques").hover(function(){
        $f( ".change" ).toggle(
            function() {
                $f('.highlight').slideUp('fast');
            },
            function() {
                $f('.highlight').slideDown('fast');
            });
    });
});

它几乎可以工作。第一篇文章工作正常，但第二篇文章扩展了第一篇和第二篇文章的内容。并且它不会停止显示/隐藏。内容似乎在跳！奇怪的东西..哦！刚注意到这些＆＃34;跳跃＆＃34;是增量的，从1开始，然后是2，然后是3，......

提前致谢！（对不起我的英文错误。）

达尼

编辑：这是HTML

<div id="portfolioContent">
    <div class="portfolio-destaques">
        <p class="destaques-data">2010-03-10</p>
        <h3><a href="#" class="change">Mauris aliquet mattis metus</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/ornare/" rel="tag">Ornare</a> <a href="http://localhost:8888/aspp/requerente/pede/" rel="tag">Pede</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/amet/" rel="tag">Amet</a> <a href="http://localhost:8888/aspp/tipologia/elit/" rel="tag">Elit</a></p>
        <div class="highlight">
            <p>Aliquam aliquet, est a ullamcorper condimentum, tellus nulla fringilla elit, a iaculis nulla turpis sed wisi. Fusce volutpat. Etiam sodales ante id nunc. Proin ornare dignissim lacus. Nunc porttitor nunc a sem. Sed sollicitudin velit eu magna. Aliquam erat volutpat. Vivamus ornare est non wisi. Proin vel quam. Vivamus egestas. Nunc tempor diam vehicula mauris. Nullam sapien eros, facilisis vel, eleifend non, auctor dapibus, pede.</p>
        </div>
    </div>
    <div class="portfolio-destaques">
        <p class="destaques-data">2006-11-08</p>
        <h3><a href="#" class="change">Cras aliquam massa ullamcorper sapien</a></h3>
        <p>Requerente: <a href="http://localhost:8888/aspp/requerente/enim/" rel="tag">Enim</a> Localização: <a href="http://localhost:8888/aspp/localizacao/matosinhos/" rel="tag">Matosinhos</a> Tipologia: <a href="http://localhost:8888/aspp/tipologia/ipsum/" rel="tag">Ipsum</a></p>
        <div class="highlight">
            <p>Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna. Integer adipiscing congue metus. Nam pede. Etiam non wisi. Sed accumsan dolor ac augue. Pellentesque eget lectus. Aliquam nec dolor nec tellus ornare venenatis. Nullam blandit placerat sem. Curabitur quis ipsum. Mauris nisl tellus, aliquet eu, suscipit eu, ullamcorper quis, magna. Mauris elementum, pede at sodales vestibulum, nulla tortor congue massa, quis pellentesque odio dui id est. Cras faucibus augue.</p>
        </div>
    </div>

CSS：

#portfolioContent {
    position: absolute;
    top: 20px;
    right: 60px;
    width: 670px;
}
.portfolio-destaques {
    position: relative;
    background: transparent url('images/menu_bg_dark.png');
}
.portfolio-destaques:hover {
    background: transparent url('images/menu_bg.png');
}

Answer 1

现在，您使用.highlight和.change类向上/向下滑动所有元素。您可能只想选择相应的元素。您可以使用遍历方法（例如nearest（）或高级选择器）来获取正确的元素，或者您可以附加post id或递增变量以使该类唯一或使用唯一ID。

更新：对于您发布的HTML，这应该有效：

$f(function(){
    $f(".change" ).toggle(
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideUp('fast');
        },
        function() {
            $f(this).parents(".portfolio-destaques").children('.highlight').slideDown('fast');
        }
    );
});

Answer 2

这对我有用：

jQuery(document).ready(function($){

   $(".entry-content").hide();

   $(".entry-title").click(function(){

$(this).parent().children(".entry-content").toggle("slide", {direction: "up"}, 500);})
});

并且（在WP循环中;根据需要更改html和CSS）：

<div class="entry-post">

<h1 class="entry-title"><?php the_title(); ?></h1>

<div class="thedate"><?php the_time('F jS, Y') ?></div>

<div class="entry-content"><?php the_content(); ?></div></div>

主要来自http://pancaketheorem.com/hideshow-wordpress-post-content-when-clicking-post-title-with-jquery/

Answer 3

使用$f( ".change" ).toggle和$f('.highlight').slideUp('fast')时，jQuery会对应用了“.change”和“.highlight”类的所有元素执行这些方法。相反，你应该使用这样的东西：

$(this).find(".change").toggle

无论如何你应该玩$（this）来达到你需要的结果。

Answer 4

试试这个：

$f('.portfolio-destaques').hover(function(){
    $f(this).find('.highlight').slideUp('fast');
},function(){
    $f(this).find('.highlight').slideDown('fast');
})

这可能适合你的情况，我希望如此......祝你好运

使用jquery显示/隐藏帖子的内容

4 个答案: