JQueryのトグルボタン最初の2回のクリックが意図したとおりに動作しない

Question

私のHTMLコードはかなりシンプルなので、押したときに用紙の要約をスクロールしてもう一度押すと（スクロール/非表示）バックアップ。私は、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>

doesnの一つとして唯一の問題は、最初のクリックですぐに抽象的な（スライドしません）と表示され、2番目のクリックではスクロールダウン（afteそれはすでに見えていた）。それから、それは完全に動作し、スクロールダウンします。

どうしましたか？

ありがとうございます！

Answer 1

お客様のHTMLは無効です。 <abstract1>などの無効なタグが表示され、タグで2倍になる傾向があります。以下のコードスニペットでは、<abstract1>タグを<div>タグに変更し、abstract1クラスを適用しました。これにより、javacriptコードでセレクタ.abstract1を使用してdivクラスをターゲティングすることができます。

コードを少しきれいにして、より適切な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>