JQuery 前两次点击切换按钮没有按预期工作

Question

我的 html 代码相当简单，我想要一个 (show/hide) 按钮，按下该按钮可向下滚动论文摘要，再次按下可将其向上滚动。我在 google 站点的 HTML 框内使用 JQuery 1.5。 html框的第一行是

然后 html:

html框的最后一部分是以下脚本：

$("#abstract1").click(function () {
    $("abstract1").slideToggle("fast");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>

<div><font color="#3d85c6"><b>Working Papers</b></font></div>
    
<div><b><font color="#0b5394"><a>Paper 1</a>
&nbsp;</font></b><button id="abstract1"><b>Abstract</b></button><br/> </div>
<abstract1 style="display:none">
<div style="line-height:175%;margin-bottom:1em"><font size="2"><font size="2">
blah blah blah...
&nbsp;</font></font></div>
</abstract1>

作为一个并不真正了解 html 的人，我对它的工作感到非常惊讶 :) 唯一的问题是在第一次点击时摘要会立即出现（不会滑动），而在第二次单击它似乎向下滚动（在它已经可见之后）。然后它完美地工作，向下和向上滚动...

我做错了什么？

非常感谢！！

Answer 1

您的HTML无效。您似乎有无效的标签，例如 <abstract1> 并且倾向于加倍使用标签。在下面的代码片段中，我已将您的 <abstract1> 标签更改为 <div> 标签，并将 abstract1 的 class 应用于它，从而允许您定位 div class 通过在 javascript 代码中使用选择器 .abstract1。

我还 'cleaned' 稍微改进了您的代码，以便它使用更合适的 HTML 标记（并删除了不需要的标记）。

有关工作示例，请参阅下面的代码片段：

$("#abstract1").click(function () {
    $(".abstract1").slideToggle("fast");
});

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

<div>
  <font color="#3d85c6"><b>Working Papers</b></font>
</div>
    
<div>
  <b><font color="#0b5394"><a>Paper 1</a>&nbsp;</font></b>
  <button id="abstract1"><b>Abstract</b></button><br /> 
</div>

<!-- Here is where you need to change the <abstract1> tag to this div: -->
<div class="abstract1" style="display:none">
  <span style="line-height:175%;margin-bottom:1em">
    <font size="2">blah blah blah...&nbsp;</font>
  </span>
</div>

JQuery 前两次点击切换按钮没有按预期工作

JQuery toggle button first two clicks don't work as intended

html

jquery

google-sites

toggle