Código HTML:
<dl class="dropdown"> <dt><a><span>Select a Field</span></a></dt> <dd> <ul id="menu-tags-menu" class="menu"> <li id="menu-item-159" class="menu-item current-menu-item"><a href="http://myweb.com.ar/portfolio/">All Fields</a></li> <li id="menu-item-54" class="menu-item"><a href="http://myweb.com.ar/tag/branding/">Branding</a></li> <li id="menu-item-55" class="menu-item"><a href="http://myweb.com.ar/tag/print-design/">Print Design</a></li> <li id="menu-item-57" class="menu-item"><a href="http://myweb.com.ar/tag/web-design/">Web Design</a></li> <li id="menu-item-56" class="menu-item"><a href="http://myweb.com.ar/tag/ui-design/">UI Design</a></li> <li id="menu-item-52" class="menu-item"><a href="http://myweb.com.ar/tag/motion-graphics/">Motion Graphics</a></li> <li id="menu-item-53" class="menu-item"><a href="http://myweb.com.ar/tag/illustration/">Illustration</a></li> </ul> </dd> </dl>
Código Javascript:
Ver original
$(document).ready(function() { $(".dropdown dt a").click(function() { $(".dropdown dd ul").toggle(); }); $(".dropdown dd ul li a").click(function() { var text = $(this).html(); $(".dropdown dt a span").html(text); $(".dropdown dd ul").hide(); $("#result").html("Selected value is: " + getSelectedValue("sample")); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (! $clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); });
Necesito que al iniciar, me reemplace el dt a span por el valor de current-menu-item, es decir que en lugar de "Select a Field" tendria que decir "All Fields" que es el valor del <li> que se encuentra activo en ese momento.
Alguna idea de como hacerlo?