JQuery Menu Icon RTL

问题

I am trying to use jQuery menu in an Arabic RTL page. I am able to make it RTL but the icon should be ui-icon-carat-1-w not ui-icon-carat-1-e. I created jsfiddle here. How do I change the direction of the arrows in sub menus, so they show the carat-1-w instead of the carat-1-e?

Also, is there any CSS reset for RTL support for jQuery to make jQuery RTL and Arabic enabled.

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();
});

回答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;
}

see also: http://api.jqueryui.com/menu/#option-icons and http://api.jqueryui.com/position/

来源：https://stackoverflow.com/questions/27349023/jquery-menu-icon-rtl