jquery - 使用JQuery滑动隐藏文本

我正在尝试制作一个在单击时显示一些文本的框。
非常简单，可以使用，但是我无法通过滑动显示文本；当我尝试这样做时，它以奇怪的动画显示，几乎没有滑动。

我用新代码制作了一个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>

我确实在尝试使其工作，但无法达到我想要的效果。

最佳答案

您可以使用.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>

关于jquery - 使用JQuery滑动隐藏文本，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48360656/