切换显示/隐藏使用jQuery

Question

(function($) { 

var $f = $; 

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

$f(function(){ 
     $f(".entry-title").toggle(
      function() { 
       $f(this).parents(".post").children('.entry-content').slideUp('fast'); 
      }, 
      function() { 
       $f(this).parents(".post").children('.entry-content').slideDown('fast'); 
      } 
     ); 
}); 

})(jQuery); 

JSFIDDLE

非常基本的我猜，但我想点击链接.entry-title显示与.entry-content类的内容。但是，似乎我必须点击链接两次才能展开内容。为什么会这样以及如何解决这个问题？不知道我在这里做错了什么。

另外，当另一个打开时，是否有办法关闭以前打开的div？ 有点像手风琴。

Answer 1

使用slideToggle()用于在它们之间切换。

toggle event jQuery的1.8已被废弃，并在jQuery的1.9去除。

var $ele = $('.entry-content').hide(); // hide initially 
 
$(".entry-title").click(function(e) { // bind click event handler 
 
    e.preventDefault(); // prevent default click event handler 
 
    var $ele1 = $(this).parents(".post").children('.entry-content').slideToggle('fast'); // toggle the animation 
 
    $ele.not($ele1).slideUp(); // slide up remaining 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="post"> 
 
    <p class="destaques-data">2010-03-10</p> 
 
    <h3><a href="#" class="entry-title">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="entry-content"> 
 
    <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="post"> 
 
    <p class="destaques-data">2006-11-08</p> 
 
    <h3><a href="#" class="entry-title">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="entry-content"> 
 
    <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>

Answer 2

只要改变你的函数是这样的：

$f(".entry-title").toggle(
      function() { 
       $f(this).parents(".post").children('.entry-content').slideDown('fast'); 
      }, 
      function() { 
       $f(this).parents(".post").children('.entry-content').slideUp('fast'); 
      } 
     ); 

它将工作。

Answer 3

这个JSFiddle显示工作代码，如果您想要添加ID或使用类，或者添加您拥有的代码（关于父 - 子关系的某些内容），这取决于您，但这是制作此类幻灯片的基础工作：

$(document).ready(function() { 
 
    $(".entry-content").hide(); 
 
    $(".entry-title").click(function() { 
 
    if ($(".entry-content").is(":hidden")) { 
 
     $(".entry-content").slideDown(); 
 
    } else { 
 
     $(".entry-content").slideUp(); 
 
    } 
 
    }); 
 
    return false; 
 
    /* or e.preventDefault(); */ 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="post"> 
 
    <p class="destaques-data">2010-03-10</p> 
 
    <h3><a href="#" class="entry-title">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="entry-content"> 
 
    <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="post"> 
 
    <p class="destaques-data">2006-11-08</p> 
 
    <h3><a href="#" class="entry-title">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="entry-content"> 
 
    <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>