2011-12-17 5 views
0

メニューは、ホバー上にサブアイテムを表示することになっています。ここでは、コード(http://docs.jquery.com/Cookbook/Navigationから)です:jQueryを使用したナビゲーションメニュー(jQuery Cookbookから)

<ul id="menu"> 
    <li class="menu">Sub 1 
    <ul> 
     <li>test 1</li> 
     <li>test 2</li> 
     <li>test 3</li> 
     <li>test 4</li> 
    </ul> 
    </li> 

    <li class="menu">Sub 2 
    <ul> 
     <li>test 1</li> 
     <li>test 2</li> 
     <li>test 3</li> 
     <li>test 4</li> 
    </ul> 
    </li> 
</ul> 

のjQueryコード:

$(document).ready(function() { 
var toggle = function(direction, display) { 
return function() { 
    var self = this; 
    var ul = $("ul", this); 
    if(ul.css("display") == display && !self["block" + direction]) { 
    self["block" + direction] = true; 
    ul["slide" + direction]("slow", function() { 
     self["block" + direction] = false; 
    }); 
    } 
}; 
} 

$("li.menu").hover(toggle("Down", "none"), toggle("Up", "block")); 
    $("li.menu ul").hide(); 
}); 

上記トグル機能でthisは何ですか?コードはどのように機能していますか? $("ul", this);によって選択されているのは何ですか?

答えて

2

"this"は、jQueryオブジェクト$("li.menu")を参照します。ホバーメソッド呼び出しがそのオブジェクトにトグル関数を適用するときです。 $("ul", this)は、第2引数( "this")で指定されたコンテキストの子であるul要素を選択するため、li.menu要素内にネストされたul要素を選択します。ホバー/トグル機能が理にかなっていることを望みます。

+0

ありがとうございました!もう一つのこと: 'self [" block "+ direction]"を使う必要はありますか?コードはそれもなくてもうまく動作します。 – Jatin

+0

私は実際にはわかりません。私も行動の違いを見ることができませんでした。目的は、誤った状態をレンダリングする可能性があるイベントキューイングを防ぐことですが、重複しているように見えます。おそらく、著者は、古いバージョンのjQueryや特定のブラウザの特色を解決する必要があると考えていたかもしれません。 –

関連する問題