javascript - "more"按钮只展开一个特定的div

Question

我的 jquery 代码有问题。我有 2 个部分(容器)。 Insdie 这个 cointainers 我有类似的结构。下面的代码。我想要做的是，当我在第一个容器中单击“更多”按钮时，我只想在此 div 中显示隐藏信息。当我在第二个容器中单击更多时，我只想在此 div 中显示隐藏信息。怎么做？现在我的按钮展开所有 div 中的所有隐藏信息

$('.info').hide();
$('.show-info').click(function(){
  $('.info').slideToggle("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
   <p>adsadasdasd</p>
   <a href="#" class="btn btn-default show-info">more</a>
   <div class="info">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div>
   </div>
  </div>
</div>
<div class="container">
  <div class="row">
   <p>adsadasdasd</p>
   <a href="#" class="btn btn-default show-info">more</a>
   <div class="info">
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div>
   </div>
  </div>
</div>

Answer 1

When I click more in second container I want to show hidden info only in this div.

Now my button expands all hidden info in all divs.

问题是你正在使用

$(".info").slideToggle()

上面写着:slideToggle all 类为 .info 的项目 - 相反，您需要限制为只有 .show-info匹配点击的按钮。

您可以通过在事件处理程序中使用 this 来做到这一点。

根据该信息，查找相关项目取决于 HTML 结构，并且对于每个场景都会有所不同。对于这个问题:

$('.info').closest(".row").hide();
$('.show-info').click(function(){
    $(this).closest('.row').next().slideToggle("fast"‌​);
});

每个信息/显示信息都在后续的 .row 行上。

(.nextAll().first() 的 OP 注释与 .next() 相同 - 您通常会使用 .nextAll(filter ).first()).

(您还需要更改初始的 hide 以便它隐藏 .row 行以匹配幻灯片)。

---

更新:这假定问题/评论中描述的以下 html:

<div class="container">
  <div class="row">
    <p>some info</p>
    <a href="#" class="btn btn-default show-info">more</a>
  </div>
  <div class="row">
    <div class="info">
       <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro perspiciatis sequi, modi architecto assumenda perferendis tenetur sunt optio quaerat est id atque, laudantium numquam distinctio sint provident, necessitatibus nobis nesciunt.</div>
    </div>
  </div>
  <div class="row">
    <p>second row of info</p>
    <a href="#" class="btn btn-default show-info">more</a>
  </div>
  <div class="row">
    <div class="info">
       <div>Second set of expanded info.</div>
    </div>
  </div>
</div>

这表明如果您正在切换 .row 那么这就是您最初需要隐藏的内容。

注意:与其通过js隐藏，不如加载时隐藏，即:

<div class="row" style='display:none'>
    <div class="info">