Question

我正在尝试在可重复的代码块上实现幻灯片切换。点击触发器后，它会打开一个评论面板。目前正在打开所有面板 - 我已经搜索过，但大多数解决方案针对的是下一个兄弟姐妹或父母，我似乎无法工作，因为它不是直接的后代。

到目前为止，jquery看起来像这样。

$('.SlideToggle').click(function() { 
  $('.SlideComments').stop().slideToggle('fast', function() {      
    $('.SlideComments').toggleClass('active', $(this).is(':visible'));
  });
});

HTML块看起来像这样。

<div class="col-100 feed-item">
<div class="row">
<div class="col-md-1 profile-pic">
<a href="<?php echo ROOT; ?>">
<img class="img-responsive" src="<?php echo ROOT; ?>images/example-profile.jpg">
</a>
</div><!-- col-md-1 -->

<div class="col-md-11">
<span class="feed-name clearfix">Leonardo Dicaprio</span>
<span class="feed-time"><i class="fa fa-clock-o"></i> 23 Minutes Ago</span>
<p>Hi, I am selling a Complete Core/Skeleton for a Mermail Deck. Anyone interested? Let me know....</p>

<div class="row">
<div class="col-xs-12">
<div class="col-100 feed-actions-container">
<ul class="feed-actions clearfix">
<li><a href="<?php echo ROOT; ?>" title="Like">Like</a></li>
<li class="SlideToggle">2 Comments</li>
<li><a href="<?php echo ROOT; ?>" title="Share">Share</a></li>
<li><a href="<?php echo ROOT; ?>" title="Report">Report</a></li>
</ul>

<div class="row SlideComments">
<div class="col-xs-12">
<ul class="feed-comments">
<li>
<span class="feed-name clearfix">Steven Ball</span>
<p>Awesome!!! let me know how much...?</p>
</li>
<li>
<span class="feed-name clearfix">Richard Carpenter</span>
<p>Why don't you just create an auction?</p>
</li>                                           
</ul>

<form role="form" class="leave-comment">
<div class="form-group">
<label for="LeaveComment">Leave Comment</label>
<textarea class="form-control common" id="LeaveComment" name="LeaveComment" rows="2"></textarea>
</div>
<button type="submit" class="btn btn-default">Post Comment</button>
</form>                                                                 
</div><!-- col-xs-12 -->
</div><!-- row -->
</div><!-- feed actions -->                                                     
</div><!--col-xs-12 -->
</div><!-- row -->                                              
</div><!-- col-md-11 -->
</div><!-- row -->
</div><!-- feed item -->

触发器位于feed-actions-container（li.SlideToggle）中的列表项上，需要滑动的面板是.SlideComments - 如上所述，这段代码将重复多次。

非常感谢你的帮助。非常感谢。

jQuery Slide Toggle影响多个Div

0 个答案: