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对象或元素过滤。

参见此示例

＆＃13;

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

＆＃13;

td {
  width: 350px;
  background: teal;
  color: white;
  padding: 30px;
  cursor: default;
}

td p {
  margin: 20px auto;
}

td p2 {
  display: none;
}

＆＃13;

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

＆＃13;

使用JQuery向下滑动隐藏文本

1 个答案: