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

使用WordPress的循环和jQuery，我试图显示/隐藏显示帖子的内容。例如：用户悬停标题和标签，然后单击并扩展内容。用jquery显示/隐藏帖子的内容

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

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

它几乎可以工作。第一篇文章工作正常，但第二篇文章扩展了第一篇和第二篇文章的内容。它不会停止显示/隐藏。内容似乎在跳跃！..怪异的东西..哦！只是注意到这些“跳跃”是增量的，从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'); 
}

来源

2011-03-28 danielcorreia

你可以发布HTML/CSS吗？ – 2011-03-28 15:57:49

你能告诉我们一些你的HTML标记吗？这会更容易回答然后 – Ozzy 2011-03-28 15:59:27

哎呀，对不起加里..你比我快:) – Ozzy 2011-03-28 16:00:22

现在你向上滑动/使用.highlight和.change类放下所有元素。您可能只想选择相应的元素。您可以使用像closest（）或高级选择器这样的遍历方法来获取正确的元素，或者您可以附加后期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'); 
     } 
    ); 
});

来源

2011-03-28 15:59:33

仍然没有运气与此。 :( – danielcorreia 2011-03-28 16:44:02

你有没有像以前一样的效果，或者这不起作用？ – 2011-03-28 16:51:50

更新：我稍微更改一下代码以允许更改嵌套更改元素。 – 2011-03-28 16:58:10

当您使用$f(".change").toggle，并$f('.highlight').slideUp('fast')，你让jQuery的执行上有“.change”和所有元素这些方法” .highlight '类申请。相反，你应该使用这样的东西：

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

无论如何，你应该玩$（this）来实现你需要的结果。

来源

2011-03-28 16:00:13

试试这个：

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

它可能工作，你的情况，我希望如此..好运

来源

2011-03-28 16:09:28 Prakash

它不起作用。当我悬停时，它保持“跳跃”。不管怎么说，还是要谢谢你。 – danielcorreia 2011-03-28 16:42:34

为了避免跳跃，请使用标题选择器，请参阅http://jsfiddle.net/gubhaju/ZAxsP/1/ – Prakash 2011-03-28 17:29:17

这个工作对我来说：

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/

来源

2011-03-28 18:37:54 markratledge

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

回答

相关问题