繁瑣的JQuery選擇器

Question

我想教自己一些簡單的JQuery，並拿出以下菜單系統。它是基於UL和LI的基本嵌套菜單，其內部的UL使用JQuery .show（）顯示，並使用.hide（）隱藏。該HTML如下： -

<ul id="menu1" class="gtrmenu"> 
     <li><span class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Single Menu</span> 
      <ul class="children"> 
        <li><a href="#">Blah blah</a></li> 
        <li><a href="#">Drivel</a></li> 
        <li><a href="#">Select something</a></li> 
        <li><a href="#">Choose me!!</a></li> 
      </ul> 
     </li> 
    </ul> 

    <ul id="menu2" class="gtrmenu menugroup2"> 
     <li><span id="menu2click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Grouped Menu</span>  
      <ul class="children"> 
        <li><a href="#">Something here</a></li> 
        <li><a href="#">More Stuff</a></li> 
        <li><a href="#">Waffle etc</a></li> 
      </ul> 
     </li> 
    </ul> 

    <ul id="menu3" class="gtrmenu menugroup2"> 
     <li><span id="menu3click" class="parent"><img class="hidden-bg" src="images/arrow-down.png"/>Search</span> 
      <ul id="searchX" class="children"> 
       <li> 
        <form> 
         <input id="search" type="text" name="firstname"> 
        </form> 
       </li> 
      </ul> 
     </li> 
    </ul>   

    <p>The quick brown fox jumps over the lazy dog</p> 

的Javascript和jQuery是如下： -

function gtrMenu(menuID, groupClass, clickElement) { 

    if (clickElement === undefined) { 
     clickElement = menuID; 
    } 

    $(menuID + ' ul').css("minWidth", $('#menu1').width()); 

    $(clickElement).click(
     function() { 

      if ($(menuID + ' ul.children').is(":hidden")) { 

       // Close any open menus within the same group. 
       if (groupClass !== undefined){ 
        $('ul.gtrmenu.' + groupClass + ' li ul.children:visible').not(menuID).closest('ul.gtrmenu').each(function(index){ 
         //console.log(index + " " + $(this).attr("id")); 
         $(this).find('li .parent img').removeClass('visible-bg').addClass('hidden-bg'); 
         $(this).find('ul.children').hide(); 
        }); 
       } 

       // Change style of arrow image. 
       $(menuID + ' li .parent img').removeClass('hidden-bg').addClass('visible-bg'); 

       // Display the submenu 
       $(menuID + ' ul.children').show(); 

      } 
      else { 

       // Revert style of arrow image. 
       $(menuID + ' li .parent img').removeClass('visible-bg').addClass('hidden-bg'); 

       // Hide the submenu. 
       $(menuID + ' ul.children').hide(); 

      } 
     } 
    ); 
} 

的JavaScript是由以下（運行它不會正確格式化爲一部分上面的HTML，所以我在這裏添加）： -

$(document).ready(function() { 
      gtrMenu("#menu1"); 
      gtrMenu("#menu2", "menugroup2" , "#menu2click"); 
      gtrMenu("#menu3", "menugroup2" , "#menu3click"); 
     }); 

菜單可以是單一的菜單，具體表現爲「單一菜單'（menu1）;或者可以將其分組，如上面（菜單2 & menu3）中的「分組菜單」（與「搜索」組合）所示。在分組菜單中，一次只能打開一個菜單 - 如果用戶打開「分組菜單」並單擊「搜索」，則關閉「分組菜單」。我很自豪地說，它的全部工作:-)然而，我在上面的組中找到打開菜單的選擇器對我來說似乎非常漫長和繁瑣（這是註釋掉的console.log行上方的行）。我的問題是：是否有更簡單的方法來查找組中已經打開的菜單（以便它們可以關閉）？

在此先感謝。

Answer 1

只要你不使用相同的類用於其他目的，實際上可以通過消除不必要的特殊性來縮短選擇器。此外，還可以通過使用has選擇刪除closest方法：

$('.gtrmenu.' + groupClass + ':has(.children:visible)').not(menuID) 

此說，我真的建議你保持專一，只是使其不太可能，你選擇一些你不打算。

$('ul.gtrmenu.' + groupClass + ':has(li ul.children:visible)').not(menuID)