jQuery につきまして、超初歩的な質問で申し訳ありません。

Question

初歩的な質問で、申し訳ございません。

jQuery につきましては、まだ、どのような事が出来るのか、きちんと把握できていない状況なのですが、

あるサイトのJSディレクトリに、config.js というファイルが置かれてあり、

その中には、

/* topmenubtn */
jQuery(document).ready(function($){      
	$('#topmenubtn').click(function(){
		$('#topmenu ul').animate({ height : 'toggle' },function(){$(this).css('display','').toggleClass('menuon');});
	});
});

このようなコードが書かれておりました。

このコードの意味としましては、

jQuery(document).ready(function($){  

サイトのコード（DOM）が全部読み込まれたら、以下を実行しなさい。

    $('#topmenubtn').click(function(){ 

もし、id=topmenubtn の部分？？？をクリックされたら、以下を実行しなさい

$('#topmenu ul').animate({ height : 'toggle' },function(){$(this).css('display','').toggleClass('menuon');}); 

id=topmenubtn の部分 に含まれる ul タグ の中の部分について、

animate？？？（イメージ）があれば、その高さを 変数'toggle'の値にしなさい？？？

そして、・・・・あとはちんぷんかんぷんです。

どなたか、お時間の有る方がいらっしゃいましたら、

だいたい、どのような操作をさせているのか、お教えいただければありがたいです。

初心者で申し訳ないのですが、よろしくお願いいたします。

Comments

[kei344]

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

[susumu]

申し訳ありませんでした。修正させていただきました。

Answer 1

こんなかんじですか？

$( '#topmenu ul' ).animate(
      { height : 'toggle' } // #topmenu ul の元の height と 0 を切り替え
    , function() { // 動作完了時に呼ばれる関数
        //  $( this ) 実行しているDOM要素をjQueryオブジェクトにしている
        // .css( 'display', '' ) 空の文字列を指定すると、直接その要素に与えられたか、.css()メソッドやその他のDOM制御メソッドで指定されたものであれば削除されます。
        // .toggleClass( 'menuon' ) menuonという名前のクラスがあれば削除、無ければ追加
        $( this ).css( 'display', '' ).toggleClass( 'menuon' );
      }
);

【.animate() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/effects/animate

【.animate() | jQuery API Documentation】
http://api.jquery.com/animate/

【.css() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/css/css

【.css() | jQuery API Documentation】
http://api.jquery.com/css/

【.toggleClass() | jQuery 1.9 日本語リファレンス | js STUDIO】
http://js.studio-kingdom.com/jquery/attributes/toggle_class

【.toggleClass() | jQuery API Documentation】
http://api.jquery.com/toggleClass/

Comments

[susumu]

.animate.css.toggleClass　のような、API???が、どのような意味合いを持つのかが理解できました。
今後は、お教えいただいたリファレンスでいろいろ探してみます。

有難うございました。

Answer 2

toggleは切替指定のプロパティ値です。
このケースだと、#topmenu ul要素が非表示状態なら表示し、表示されていれば非表示になるようアニメーションしなさいという意味になります。heightに指定すれば縦方向に、widthに指定すれば横方向に出入りするようなアニメーションになります。
toggleClass('menuon')はこの要素にmenuonというクラスが指定されていれば削除し、指定されていなければ追加しなさいという意味です。
css('display','')の部分はよくわかりません。エラーというか、無効になると思うのですが。

Comments

[susumu]

ありがとうございました。APIの概要が解りました。

多分、id=topmenubtn の部分？？？をクリックしたら、何らかのアニメーションを表示しなさい・・・的な感じのものだと思います。

もうすこし、いろいろ調べてみます。

有難うございました。