我正在尝试隐藏 jquery ui 菜单小部件的子菜单图标(默认值为 ui-icon-carat-1-e)。
$(document).ready(function(){
$(function() {
$( "#menu" ).menu({
icons: {
submenu: false
}
});
});
});
我想解决方案很简单,但我无法理解:-(
谢谢你们的帮助,伙计们。
编辑:这是我的 html 代码:
<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>
这是 jquery 完成它的工作后的代码:
<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>
我想删除这个烦人的span标签span class="ui-menu-icon ui-icon ui-icon-carat-1-e"
干杯 亚历克斯
最佳答案
之前的答案是一个糟糕的黑客。 您可以使用正确的设置来删除图标,但这会在图标通常所在的位置留下一个空白区域。 使用 CSS 删除图标的额外间距。您可以同时执行这两个操作,也可以只执行 CSS 部分。
Javascript菜单初始化(可选更改 - css将完全隐藏它):
$("#mymenu").menu({
icons: {submenu: 'ui-icon-blank'}
});
CSS 更改:
#mymenu .ui-menu-icon{display: none;}
#mymenu.ui-menu .ui-menu-item{padding: 3px 3px 3px 3px;}
关于jquery - 在 jQuery UI 菜单小部件中隐藏子菜单图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18231023/