JQueryコードの問題

Question

私のjQueryの仕組みを理解しようとしています。

だから、基本的に私はjQueryのサブメニューの効果を作成し、ここにある私のjQuery

$(".sidebar-icon").click(function() {     
    $(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 
    $(" 
$('.nav a').click(function(){ 
    $(this).closest('li').find('ul').toggleClass('disp'); 

誰もが、私は、各コードを一つずつ理解し、説明するのに役立つことができますか？

Answer 1

.toggleClass()：クラスの存在またはstate引数の値に応じて、一致する要素のセット内の各要素から1つ以上のクラスを追加または削除します。

.find()：一致する要素の現在のセット内の各要素の子孫を取得し、セレクタ、jQueryオブジェクト、または要素でフィルタします。

.closest()：セット内の各要素について、要素自体をテストし、DOMツリーの祖先を走査することによってセレクタに一致する最初の要素を取得します。

他の機能については、ちょうどGoogleを参照してください。 jquery removeClassのようにあなたはあなたのすべての答えを持っています。

Answer 2

.toggleClassは、選択された要素に与えられたクラスがあるかどうかをチェックします。もしそうであれば削除し、そうでなければ追加する。

イベントハンドラ関数では、thisがイベントがトリガされたターゲット要素です。つまり、.click()ハンドラでは、クリックした要素です。これは、チュートリアルや教科書からjQueryについて学ぶべき最も基本的なものの1つです。

ので

$(this).closest('li').find('ul').toggleClass('disp'); 

は、あなたがクリックしたリンクが含まれている最も近い<li>要素を見つけ、それ内のすべての<ul>の要素を見つけ、そして彼らのdispクラスを切り替えることを意味します。

Answer 3

jquery APIのドキュメントを理解できないようであるので、私は先に進んで行ごとに細かく説明します。

最初の行でライン1

$(".sidebar-icon").click(function() { 

、あなたはjqueryのを言っているあなたは（バーガーアイコンであることを起こる）クラス「サイドバーのアイコン」を持つ要素をクリックしたときに、それを{}内にカプセル化されたイベントをトリガーします。 click（）は、メソッド/イベントハンドラとして知られています。

ライン2.

$(".content").toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 

ここにこれを使用すると、クラスのサイドバーのアイコンで要素をクリックした後、次のイベントです。

ラインの最初の部分：

$(".content") 

は、クラス「内容」を持つ要素を探すためにjqueryのを伝えます。

次に、

.toggleClass("sidebar-collapsed").toggleClass("sidebar-collapsed-back"); 

は、それはあなたが指定した要素を発見した後にjQueryが呼び出すメソッドです。 "sidebar-icon"をクリックするたびに、toggleClass（）メソッドは基本的にクラス "sidebar-collapsed"と "sidebar-collapsed-back"をクラス "content"を持つ要素に追加して削除しますあなたのケースでは1つの部門になります）。 2行目と同様に3

$("#nav li ul").removeClass('disp'); 

ラインは、jQueryのは、次いで、ID "#nav"（UL要素）とその子孫の李、李の子孫ul要素を含む要素を検索します。 JqueryはremoveClass（）メソッドを呼び出し、その要素からクラス "disp"を削除します。

ライン4および5

$("#nav li").find('span.fa').addClass('fa-plus').removeClass('fa-minus'); 
}); 

ていない上から大きく異なります。 Jqueryは、id "nav"とその子孫要素liを含む要素を探します。次にJqueryはfind（）メソッドを呼び出し、DOMツリーをたどってクラス "fa"を持つ子孫スパン要素を探します。 JqueryはaddClassメソッドを呼び出し、クラス "fa"を持つspan要素にクラス "fa-plus"を追加します。同じように、JqueryはremoveClass（）メソッドを呼び出し、同様にクラス "fa"を持つ同じspan要素からクラス "fa-minus"を削除します。

最後に、5行目は基本的に、他の言語と同じようにjquery関数を閉じて終了する方法です。 これまでのところ、残りのコードを読んで、何が起こっているのか理解できるはずです。私は技術的に間違っていることなく、最も簡単な方法でこれを説明するために最善を尽くしました。しかし、私がした場合、誰も私を修正するために自由に感じる。