jQuery的下拉菜单

Question

我创建了一个jQuery的下拉菜单中具有以下HTML：

<dl class="dropdown"> 
       <dt><a id="linkglobal1"><span class="icon lock">Action</span></a></dt> 
       <dd> 
        <ul id="ulglobal1"> 
         <li><a href="#"><span>Everyone</span></a></li> 
         <li><a href="#"><span>Friends</span></a></li> 
         <li><a href="#"><span>Only Me</span></a></li> 
         <li><a href="#"><span>Customize</span></a></li> 
        </ul> 
       </dd> 
      </dl> 

，然后JS：

$(document).ready(function() 
{ 
    $('dl.dropdown dt a').click(function() 
    { 
     $("dl.dropdown dt a").removeClass("selected"); 
     var toggleId = "#" + this.id.replace(/^link/,"ul"); 
     $('dl.dropdown dd ul').not(toggleId).hide(); 
     $(toggleId).toggle(); 
     if($(toggleId).css("display") == "none") 
     { 
      $(this).removeClass("selected"); 
     } 
     else 
     { 
      $(this).addClass("selected"); 
     } 
    }); 
    $("dl.dropdown dd ul li a").click(function() 
    { 
     $("dl.dropdown dd ul").hide(); 
     $("dl.dropdown dt a").removeClass("selected"); 
    }); 
    $(document).bind('click', function(e) 
    { 
     var $clicked = $(e.target); 
     if (! $clicked.parents().hasClass("dropdown")) 
     { 
      $("dl.dropdown dd ul").hide(); 
      $("dl.dropdown dt a").removeClass("selected"); 
     } 
    }); 
}); 

我遇到的问题是，它依赖于使用上的ID <dt>链接和<ul>。我如何修改我的jQuery，使其不再依赖它们？

感谢

编辑：我这个回答自己。见下文。

Answer 1

这个你那里：

$(document).ready(function() 
{ 
    $('dl.dropdown dt a').click(function() 
    { 
     $("dl.dropdown dt a").removeClass("selected"); 

     var toggleMenu = $(this).parent().parent().find('dd ul'); 

     $(toggleMenu).toggle(); 

     $('dl.dropdown dd ul').not(toggleMenu).hide(); 

     if(toggleMenu.css("display") == "none") 
     { 
      $(this).removeClass("selected"); 
     } 
     else 
     { 
      $(this).addClass("selected"); 
     } 
    }); 
    $("dl.dropdown dd ul li a").click(function() 
    { 
     $("dl.dropdown dd ul").hide(); 
     $("dl.dropdown dt a").removeClass("selected"); 
    }); 
    $(document).bind('click', function(e) 
    { 
     var $clicked = $(e.target); 
     if (! $clicked.parents().hasClass("dropdown")) 
     { 
      $("dl.dropdown dd ul").hide(); 
      $("dl.dropdown dt a").removeClass("selected"); 
     } 
    }); 
}); 

Answer 2

给那些物品类。这些类不需要存在。

   <ul id="ulglobal1" class="dropdown"> 
        <li><a href="#"><span>Everyone</span></a></li> 
        <li><a href="#"><span>Friends</span></a></li> 
        <li><a href="#"><span>Only Me</span></a></li> 
        <li><a href="#"><span>Customize</span></a></li> 
       </ul> 

那么你的jQuery选择使用

$(".dropdown").... 

Answer 3

您可以使用jbar jQuery插件 jbar是一个jQuery插件，它可将无序列表与下拉菜单的工具栏。请按照下面的链接： - jbar@GitHub