2010-10-19 50 views
1

優化以下使用委託()的片段的最佳方式是什麼?jQuery委託優化

jQuery('.menu').delegate('li.gallery', 'hover', function() { jQuery(this).children('.submenu').toggleClass('hide show'); }); 
jQuery('.menu').delegate('li.interior', 'hover', function() { jQuery(this).children('.submenu').toggleClass('hide show'); }); 
jQuery('.menu').delegate('li.exterior', 'hover', function() { jQuery(this).children('.submenu').toggleClass('hide show'); }); 


<li class="gallery"> 
        <span>gallery</span> 
        <ul class="submenu hide"> 
         <li class="interior"> 
          <a href="/gallery/interior">Interior</a> 
          <ul class="submenu hide"> 
           <li><a href="/gallery/interior?gallery=master-bedroom">Master Bedroom</a></li> 
           <li><a href="/gallery/interior?gallery=living-room">Living Room</a></li> 
           <li><a href="/gallery/interior?gallery=dining-room">Dining Room</a></li> 
           <li><a href="/gallery/interior?gallery=kitchen">Kitchen</a></li> 
           <li><a href="/gallery/interior?gallery=bathroom">Bathroom</a></li> 
           <li><a href="/gallery/interior?gallery=foyer">Foyer</a></li> 
           <li><a href="/gallery/interior?gallery=study">Study</a></li> 
           <li><a href="/gallery/interior?gallery=sunroom">Sunroom</a></li>         
           <li><a href="/gallery/interior?gallery=guest-room">Guest Room</a></li>                
          </ul> 
         </li> 
         <li class="exterior"> 
          <a href="/gallery/exterior">Exterior</a> 
          <ul class="submenu hide"> 
           <li><a href="/gallery/exterior?gallery=landscapes">Landscape</a></li> 
           <li><a href="/gallery/exterior?gallery=gardens">Gardens</a></li> 
           <li><a href="/gallery/exterior?gallery=cottages">Cottages</a></li> 
           <li><a href="/gallery/exterior?gallery=entry-driveway">Entry/Driveway</a></li>                        
          </ul> 
         </li>      
        </ul> 
       </li> 
+0

你有什麼優化?可讀性?速度?可擴展性? – 2010-10-19 19:06:51

+0

可讀性和速度。無意縮放。 – 2010-10-19 19:13:44

+0

包括'.menu'將是一個開始。 – 2010-10-19 19:20:58

回答

2

您可以在.delegate()選擇參數使用multiple selector (,)

然而,由於what I would consider a bug in how .delegate() works(關mouseover/mouseout,進入一個孩子時觸發),我會避開它,它現在和直接綁定,就像這樣:

jQuery('.menu').find('li.gallery, li.interior, li.exterior').hover(function() { 
    jQuery(this).children('.submenu').toggleClass('hide show'); 
}); 
+0

我也這麼認爲,但是當我把鼠標懸停在子菜單上時,第一個觸發器再次觸發。我在上面添加了標記。 – 2010-10-19 19:11:14

+0

@matt - 您使用的是哪個版本的jQuery?直到最近,「懸停」才被正確添加。 – 2010-10-19 19:14:06

+0

@nick 1.4.2,我認爲與代表的唯一版本。 – 2010-10-19 19:15:11