jquery로 게시물 내용 표시/숨기기

Question

Wordpress 루프 및 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'); 
} 

Answer 1

당신이 슬라이딩/.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'); 
     } 
    ); 
}); 

Answer 2

당신이 $f(".change").toggle를 사용하고 $f('.highlight').slideUp('fast'), 당신은 jQuery를이 '.change'하고있는 모든 요소에 이러한 방법을 실행할 수 있도록 '.highlight '에 적용된 수업. 대신이 같은 것을 사용해야합니다

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

어쨌든 당신은 당신이 필요로하는 결과를 달성하기 위해 $ (이) 함께 플레이해야한다.

Answer 3

이 시도 :

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

그것은 상황을 작동 할 수 있습니다, 난 그렇게 희망을 .. 행운

Answer 4

을이 나를 위해 작동합니다

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/