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>
Funcionando con jquery y el siguiente codigo:
Código Javascript :
$(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 valor de dt a span por el valor del <li> que tenga la clase 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?
