Tengo el siguiente menu dropdown:
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 el siguiente codigo:
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?