使用 JQuery 向下滑动隐藏的文本

Question

我正在尝试制作一个框，单击该框时会在其上显示一些文本。 很简单，而且可以，但是我不能让文字通过滑动出现；当我尝试这样做时，它以奇怪的动画显示，几乎没有滑动。

我用新代码制作了一个 JSFiddle 版本，效果几乎完美（唯一的问题是文本滑动之前的延迟，我希望它可以更柔和的动画），但我不'不知道我在真实版本中做了什么不同，所以我也把它放在了 JSFiddle 上，所以你可以比较。

测试版： https://jsfiddle.net/5dfazgyw/6/

真正的基于代码的版本： https://jsfiddle.net/188qgqjL/5/ （注意只在动画开始滑动，之后自然出现）

我把我的测试版本放在这里，但最重要的是真正的代码版本：

$('tr').on('click', function() {
	$('#table tr td p2').slideToggle()
})

td {
  width:350px;
  background:teal;
  color:white;
  padding:30px;
  cursor:default;
}

td p {
  margin: 20px auto;
}

td p2 {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table">

<tr><td>
<p>
LOREM IPSUM
</p>
<p2>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p2>
</td></tr>

<tr><td>
<p>
LOREM IPSUM
</p>
<p2>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p2>
</td></tr>

<tr><td>
<p>
LOREM IPSUM
</p>
<p2>
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
</p2>
</td></tr>

</table>

我真的很想使这个工作，但我无法达到我想要的效果。

Answer 1

你可以使用.find()方法：

获取当前匹配元素集中每个元素的后代，由选择器、jQuery 对象或元素过滤。

看这个例子

$('tr').on('click', function() {
  $(this).find("p2").slideToggle();
})

td {
  width: 350px;
  background: teal;
  color: white;
  padding: 30px;
  cursor: default;
}

td p {
  margin: 20px auto;
}

td p2 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="table">

  <tr>
    <td>
      <p>
        LOREM IPSUM
      </p>
      <p2>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      </p2>
    </td>
  </tr>

  <tr>
    <td>
      <p>
        LOREM IPSUM
      </p>
      <p2>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      </p2>
    </td>
  </tr>

  <tr>
    <td>
      <p>
        LOREM IPSUM
      </p>
      <p2>
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
      </p2>
    </td>
  </tr>

</table>