javascript - 在与 <button> 相同的 <div> 中展开 <p>

Question

<div class="row featurette">
   <div class="col-md-5">
      <img class="featurette-image img-responsive" src="img/serv_thumb.png" alt="Generic placeholder image" title="916 x 458">
   </div>
   <div class="col-md-7">
      <h2 class="featurette-heading">News Story Uno 
          <span class="text-muted"></span>     
      </h2>
      <p class="sub">He aquí una rápida veraniego de la noticia, ya que el promedio de atención de un americano hoy es de alrededor de 5 segundos. Pero si lo desea, haga clic aquí para leer más!</p>
      <button class="btn-default btn-sm btn-marketing">Expand Story</button>
      <p class="hidden">Estamos agregando constantemente a nuestra cartera de contenido de vídeo de alta calidad. Lo que encontrará aquí son ejemplos de nuestros servicios que se muestran a través de productos terminados de los clientes podía comprender. Yo, literalmente, sólo añadí esta historia para obtener la página para desplazarse. Creo seis y cincuenta y seis relatos de la página debe ser bueno, y luego tener el botón de archivo a continuación.</p>
      <p class="hidden">Yo, literalmente, sólo añadí esta historia para obtener la página para desplazarse. Creo seis y cincuenta y seis relatos de la página debe ser bueno, y luego tener el botón de archivo a continuación. Estamos agregando constantemente a nuestra cartera de contenido de vídeo de alta calidad. Lo que encontrará aquí son ejemplos de nuestros servicios que se muestran a través de productos terminados de los clientes podía comprender.</p>
   </div>
</div>

这就是我的 <div> ...相当标准。这是一个可扩展的新闻报道。隐藏了 cals 的段落被隐藏在准备就绪行 $(".hidden").hide(0); 上。在我的 jQuery/JS 文件中。然而，我很困惑。

我怎样才能只获取同一个 div 中的段落作为button至.slideToggle();单击时？

Answer 1

您可以使用.siblings() :

$('button.btn-default').click(function() {
    $(this).siblings('p.hidden').slideToggle();
});

或 .nextAll() :

$('button.btn-default').click(function() {
    $(this).nextAll('p.hidden').slideToggle();
});

<强> Fiddle Demo