javascriptでdiv-sizeを切り替える

javascriptを使用してdivのサイズを切り替えようとしています。これを行う方法の基本的な考え方を理解するために、私はこの例を複製しようとしました：Toggling Div (JSFiddle)javascriptでdiv-sizeを切り替える

しかし、何らかの理由で私が作業中のJSFiddleからコピーしたにもかかわらず、何らかの理由で機能しません。何故ですか？ここに私の複製です：

<!DOCTYPE html> 
<html> 

<head> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

    <style type="text/css">#topbar { 
    background: orange; 
    color: white; 
    height: 10px; 
    text-align:center; 
    }</style> 

    <script type="text/javascript"> 

    $("#topbar").click((function() { 
    var i = 0; 
    return function() { 
     $(this).animate({ 
      height: (++i % 2) ? 40 : 10 
     }, 200); 
    } 
    })()); 

    </script> 

</head> 

<body> 

<div id='topbar'>toggle me</div> 


</body> 

</html>

出典

2016-12-17 JoSch

うわー！あなたはjQueryをまったく追加していません！スクリプトを呼び出す前に<head>にこれを追加してください。

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

は、コンソールでこのエラーを持っている必要があります：あなたはコンテキストではありませんthisを使用している

Reference Error: $ not defined.

。あなたが関数の中に置くと、それはひっくり返します。このようにそれを実行します。

$(function() { 
    $("#topbar").click(function() { 
     var i = 0; 
     $(this).animate({ 
      height: (++i % 2) ? 40 : 10 
     }, 200); 
     return false; 
    }); 
});

thisあなたが使用し、そのコンテキストとして、あなたの内側の機能を服用します。 <div>は<script>の後に来るので、$(function() {})の中に入れてください。

出典

2016-12-17 22:20:44

申し訳ありませんが残念です。 – FurkanO

@FurkanO失礼して申し訳ありません。本当に申し訳ありません。 –

@PraveenKumar私の間違いを指摘してくれてありがとう。今、フォローアップの質問：現在のスクリプトは絶対ピクセル値を使ってdivの幅をトグルします。代わりにパーセント値を使用するにはどうすればよいですか？ – JoSch

javascriptでdiv-sizeを切り替える

答えて

関連する問題