DaFunkyAlex DaFunkyAlex - 2 months ago 14
jQuery Question

Hide submenu icons in jQuery UI Menu Widget

I'm trying to hide the submenu icon for jquery ui menu widget (default value is ui-icon-carat-1-e).

$(document).ready(function(){
$(function() {
$( "#menu" ).menu({
icons: {
submenu: false
}
});
});
});


I guess the solution is very simple, but I can't get it :-(

Thanks for your help, guys.

EDIT: Here's my html code:

<ul id="menu" style="z-index:1">
<li><a href="#"><span class="ui-icon ui-icon-info" style="margin: 3px 0 0 4px;"></span>Information </a>
<ul>
<li><a href="?site=something"><span class="ui-icon ui-icon-star" style="margin: 2px 0 0 4px;"></span>Something</a></li>
<li>...</li>
...
</ul>
</ul>


And here's the code when jquery has done it's hob:

<ul id="menu" class="ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" style="z-index:1" role="menu" tabindex="0" aria-activedescendant="ui-id-152">
<li class="ui-menu-item" role="presentation">
<a id="ui-id-152" class="ui-corner-all" href="#" aria-haspopup="true" tabindex="-1" role="menuitem">
<span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span>
<span class="ui-icon ui-icon-info" style="margin: 3px 0 0 4px;"></span>
Information
</a>
<ul class="ui-menu ui-widget ui-widget-content ui-corner-all" style="display: none; top: 31px; left: 20px;" role="menu" aria-expanded="false" aria-hidden="true">
<li class="ui-menu-item" role="presentation"> … </li>
<li class="ui-menu-item" role="presentation"> … </li>
<li class="ui-menu-item" role="presentation"> … </li>
<li class="ui-menu-item" role="presentation"> … </li>


And I want to remove this annoying span tag span class="ui-menu-icon ui-icon ui-icon-carat-1-e"

Cheers
Alex

Answer

Working Fiddle using jquery solution

Basically you can do this by using the jquery remove command.

JS(run after initializing the widget)

$('.ui-menu-icon.ui-icon.ui-icon-carat-1-e').remove();
Comments