Question

当我点击分享您的想法时，评论块会向下滑动每个实例。我想要的是它应该只针对特定部分，而不是全部。下面是我的代码片段。实际上我正在使用php动态创建所有部分，我的页面上有近10-15个部分，即使我点击特定部分，每个部分的评论块也会下降。那么这是可能的，当我点击按钮时，只有一个块向下滑动，而不管我的页面有多少部分。

$('.down').click(function () {

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'up' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;
     

	  $('.card').toggle(effect, options, duration);
});

#comments{
       background-color: #535d92;
       display: none;
       height:60px;
           }

#slide {
    width: 90%;
    margin-top: 14px;
    margin-left: 14px;
	z-index:1;
    border: none;
	border-radius: 2.5em;
	background: #fff;
	-webkit-appearance: none; 
    outline:none;
	padding: 0.85em 1.5em;
	height:10%;
         }

.cd-container {
       width: 90%;
       margin: 0 auto;
               }

.post-footer ul {list-style:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="container">
  <section class="cd-container">
   <div class="cd-timeline-content">
    <h3>raghav</h3>
	<p>Lorem ipsum dolor sit amet, consectetur                         adipisicing elit.</p>
	<div class="post-footer">
	<ul>
	<li class="down"><a href="#">Share your thoughts</a></li>
	</ul>	
	</div>
	</div><br/>
		<div id="comments" class="card">
		<input type="text"  id="slide" placeholder="Hit Enter to            Send!" class="boom"/>
       </div>
  </section> <!-- cd-timeline --><br> 
							
 <section class="cd-container">
  <div class="cd-timeline-content">
    <h3>sharad</h3>
				<p>Lorem ipsum dolor sit amet, consectetur                         adipisicing elit.</p>
	<div class="post-footer">
	<ul>
	<li class="down"><a href="#">Share your thoughts</a></li>
	</ul>	
    </div>
	</div><br/>
	<div id="comments" class="card">
    <input type="text"  id="slide" placeholder="Hit Enter to           Send!" class="boom"/>
	</div>
 </section>
</div>

Answer 1

您应该找到父元素并搜索评论部分。

$(document).on('click', '.down', function () {
    //find the parent
    var $parent = $(this).parents('.cd-container');    

    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = { direction: 'up' };

    // Set the duration (default: 400 milliseconds)
    var duration = 700;

    $parent.find('.card').toggle(effect, options, duration);
});

我也改变了点击处理程序，因为它们是你绑定它的方式，它不会触发动态添加的元素，只会在页面加载时触发，也是一个很好的做法，可以放弃.click()并使用{ {1}}而不是。

.on('click')

Answer 2

仅激活所点击的同一部分中的.card share your thoughts元素。过程：

替换
```
 $('.card').toggle
```
与
```
$(this).parents('section.cd-container').find('.card').toggle
```
此外，还要解决您的第二个问题，即这些部分是动态的。如果您的意思是在页面加载后加载部分，例如使用 ajax然后只需将点击的钩子更改为容器元素或文档，并让它委派点击。过程：

替换
```
$(".down").click(function() {
```
与
```
$(".container").on("click", ".down", function() {
```
我注意到你有多个id="comments"元素你的HTML。这是无效的，因为DOM元素的id名称必须是独一无二的。我建议你把它改成班级和班级 css将#comments的规则更改为.comments

在此查看工作示例：

$(".container").on("click", ".down", function() {

  // Set the effect type
  var effect = 'slide';

  // Set the options for the effect type chosen
  var options = {
    direction: 'up'
  };

  // Set the duration (default: 400 milliseconds)
  var duration = 700;

  $(this).parents('section.cd-container').find('.card').toggle(effect, options, duration);
});

#comments {
  background-color: #535d92;
  display: none;
  height: 60px;
}
#slide {
  width: 90%;
  margin-top: 14px;
  margin-left: 14px;
  z-index: 1;
  border: none;
  border-radius: 2.5em;
  background: #fff;
  -webkit-appearance: none;
  outline: none;
  padding: 0.85em 1.5em;
  height: 10%;
}
.cd-container {
  width: 90%;
  margin: 0 auto;
}
.post-footer ul {
  list-style: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div class="container">
  <section class="cd-container">
    <div class="cd-timeline-content">
      <h3>raghav</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <div class="post-footer">
        <ul>
          <li class="down"><a href="#">Share your thoughts</a>
          </li>
        </ul>
      </div>
    </div>
    <br/>
    <div id="comments" class="card">
      <input type="text" id="slide" placeholder="Hit Enter to            Send!" class="boom" />
    </div>
  </section>
  <!-- cd-timeline -->
  <br>

  <section class="cd-container">
    <div class="cd-timeline-content">
      <h3>sharad</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <div class="post-footer">
        <ul>
          <li class="down"><a href="#">Share your thoughts</a>
          </li>
        </ul>
      </div>
    </div>
    <br/>
    <div id="comments" class="card">
      <input type="text" id="slide" placeholder="Hit Enter to           Send!" class="boom" />
    </div>
  </section>
</div>

仅针对单个实例显示jquery向下滑动？

2 个答案: