javascript - 使用 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时关闭之前打开的div？有点像 Accordion 。

Answer 1

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

toggle event was deprecated in jQuery 1.8 and removed in 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>