Question

我正在尝试在阿拉伯语RTL页面中使用jQuery菜单。我可以将其设为RTL，但图标应为ui-icon-carat-1-w而不是ui-icon-carat-1-e。我创建了jsfiddle here。如何更改子菜单中箭头的方向，以便显示carat-1-w而不是the carat-1-e？

此外，是否有任何CSS重置为RTL支持jQuery以启用jQuery RTL和阿拉伯语。

body {
    text-align: right;
}

*{
    direction: rtl
}

a, a:link, a:visited{
    font-size: 16px;
    font-family: Arial,Verdana,Tahoma,Times,Sans-Serif;
    text-decoration: none;
    font-weight: normal;
}

.ui-menu {
    float: right;
}

.ui-menu .ui-menu-icon {
    right: auto;
    left: 0;
}

<ul id="menu" style="width: 200px;">
    <li><a href="#">العربية</a>
        <ul id="submenu">
            <li><a href="#">حسابات</a></li>
            <li>ادارة</li>    
            <li>رصيد</li>
        </ul> 
    </li>
    <li><a href="#">تسجيل</a></li>    
<li><a href="#">اتصال</a></li>
</ul>    


$(document).ready(function () {
    $('#menu').menu();
});

Answer 1

<强> jsFiddle

$('#menu').menu({
    icons: { submenu: "ui-icon-carat-1-w" },
    position: { my: "right top", at: "left-5 top-2"}
});

CSS：

.ui-menu .ui-menu-icon {
  float:left;
}

另请参阅：http://api.jqueryui.com/menu/#option-icons和http://api.jqueryui.com/position/

JQuery菜单图标RTL

1 个答案: