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"); 
     } 
    }); 
}); 

Проблемой, которую я имею, что она опирается на использование идентификаторов на как <dt>, так и <ul>. Как я могу изменить свой jQuery, чтобы он больше не полагался на них?

Благодаря

EDIT: Я ответил на это сам. Смотри ниже.

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