JQueryと展開/折りたたみ機能

ボタンを押したときにテキストを展開したり折りたたんだりするのにとても簡単なコードを書いていますが、動作しません。JQueryと展開/折りたたみ機能

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script> 
$('.expand').click(function(){ 
    $('.content').slideToggle('slow'); 
}); 
</script> 
</head> 
<body> 
<div class="sitesection"> 
    <p class="expand"><a href="#">Click Here To Display The Content</a></p> 
    <p class="content">Hello World!"</p> 
</div> 
</body> 
</html>

「コンテンツを表示するにはここをクリック」をクリックしても何も起こりません。

出典

2017-06-26 Alessandro

DOM readyイベントを使用します。 – epascarello

は（.... 'メソッド – Shubham

は、私は'

こちらをクリックしてコンテンツ

こんにちは、世界を表示するには！

'であなたを興味ことはできますか？ –

は下にあなたのコードを置くか、それが存在する前に、あなたが要素にイベントをバインドするため

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<link rel="stylesheet" href="style.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 
<div class="sitesection"> 
 
    <p class="expand"><a href="#">Click Here To Display The Content</a></p> 
 
    <p class="content">Hello World!"</p> 
 
</div> 
 
<script> 
 
$('.expand').click(function(){ 
 
    $('.content').slideToggle('slow'); 
 
}); 
 
</script> 
 
</body> 
 
</html>

出典

2017-06-26 12:39:16

を働かせてくれてありがとうございました！説明することができますか（または私に説明をリンクしてください）なぜですか？スクリプトは頭の代わりに体の底に置くべきですか？ – Alessandro

@alessandro スクリプトを実行する要素がDOM内になければならない場合 https://learn.jquery.com/using-jquery-core/document-ready/ –

@エールssandro clickイベントは、DOM要素が作成される前にそれを行うと何かにバインドされません。 .clickを最後に配置すると、DOMが準備されているか、clickイベントをバインドする前にスクリプトdocument.readyで指定します。 – user5014677

-1

はこの

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

</head> 
<body> 
<div class="sitesection"> 
    <p class="expand"><a href="#">Click Here To Display The Content</a></p> 
    <p class="content">Hello World!"</p> 
</div> 
<script> 
$('.expand').click(function(){ 
    $('.content').slideToggle('slow'); 
}); 
</script> 
</body> 
</html>

試してみてくださいまたはロード文書の後にJavaScriptを呼び出す必要があります。

出典

2017-06-26 12:37:59

「これを試してみてください最後に、それを定義するか、' $（文書）.LOADを使用します –

@NiettheDarkAbsol私は最後のコード –

JQueryと展開/折りたたみ機能

答えて

関連する問題