Question

我的jquery代码有问题。我有2节（容器）。 Insdie这个投币器我有类似的结构。代码如下。我想要做的是当我点击第一个容器中的“更多”按钮时我想在此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

当我在第二个容器中点击更多时，我想仅在此div中显示隐藏信息。

现在我的按钮会扩展所有div中的所有隐藏信息。

问题是您正在使用

$(".info").slideToggle()

其中说：slideToggle 所有项目的类别为.info - 相反，您只需要限制为与点击的按钮匹配的.show-info。

您可以在事件处理程序中使用this来完成此操作。

鉴于该信息，查找相关项目取决于HTML结构，并且每个方案将有所不同。在此问题的情况下：

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

每个info / show-info位于后续.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>

表明，如果您是toggling .row，那么您最初需要隐藏的内容。

注意：不是通过js隐藏，最好隐藏加载，即：

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

Answer 2

使用next()功能查找下一个信息并进行切换。此外，如果您想在页面加载调用隐藏在onload上时隐藏它们，或者使用css将它们显示为none。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

最好的方法是在当前行中找到隐藏的信息，然后使用slideToggle it。

看一下片段：

    <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>
  <script>
    $('.info').hide();
    $('.show-info').click(function(){
      
      $(this).parent().find('.info').slideToggle("fast");
    });
  </script>

Answer 4

使用此代码：

$('.info').hide();
$('.show-info').click(function(){
  $('.info').slideUp('fast');
  $(this).closest(".row").find(".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>

“更多”按钮只展开一个特定的div

4 个答案: