0

我有一个使用英文版和阿拉伯文版的 ul li 菜单。现在，在阿拉伯语版本中，菜单必须以相反的顺序排列，我们如何才能实现我的代码是

 <ul id="menu">
        <li><a href="../Default.aspx">
            <img src="../images/logoheader.png" height="24px" alt="Home" /></a></li>
        <li><a href="../Lgs.aspx?confirm=1">
            <%=Resources.Fields.lgs%></a> </li>
        <li><a href="../CustomPage.aspx?Pid=2">
            <%=Resources.Fields.aboutus%></a> </li>
        <li><a href="../Login.aspx?confirm=1">
            <%=Resources.Fields.login%>
        </a><a href="../Signup.aspx?confirm=1">
            <%=Resources.Fields.register%></a> </li>
            <li><a href="#">
                <%=Resources.Fields.more_new%></a></li>
    </ul>


这将显示如下 LG | 关于我们 | 登录 | 注册 | 更多的

我想在javascript中像这样反转它

更多 | 注册 | 登录 | 关于我们 | LG | 家

4

2 回答 2

2

我的建议li是以适当的顺序在服务器端输出元素。

但是如果您想在客户端处理它：除非您需要支持 IE7 或更早版本，否则您不需要 JavaScript。

几个客户端选项供您选择：

  1. HTMLdir属性（不适用于 IE7 及更早版本，适用于 IE8 及更高版本）

  2. CSS direction: rtl （不适用于 IE7 及更早版本，适用于 IE8 及更高版本）

  3. JavaScript （甚至适用于 IE6）

1. HTMLdir属性

您可以使用以下dir属性ul：

<ul id="menu" dir="RTL">

如果li元素是inline-block，那将颠倒它们的顺序。

实例| 来源

我建议在页面消失之前在服务器端应用该属性，但如果您需要在 JavaScript 中执行此操作：

document.getElementById("menu").dir = "RTL";

实例| 来源

2.CSS

您也可以通过应用 CSS 来做到这一点：

#menu {
  direction: rtl;
}

实例| 来源

3. JavaScript

但是 JavaScript 解决方案是按顺序遍历列表项，从第二个开始，然后使用insertBeforeDOM 方法将每个项移到顶部。你最终的顺序颠倒了。看起来像这样：

var list = document.getElementById("menu");
var child, sibling;

if (list.childNodes.length > 1) {
  for (child = list.firstChild.nextSibling; child; child = sibling) {
    sibling = child.nextSibling;
    list.insertBefore(child, list.firstChild);
  }
}

实例| 来源

以上所有内容都调整了li元素的顺序，但没有调整其中文本的方向，我假设您正在其他地方处理。但如果不是，只需将此 CSS 应用于您想要制作 RTL 而不是 LTR 的任何元素：

relevant_selector {
  direction:rtl;
  unicode-bidi:bidi-override;
}
于 2012-12-15T08:50:30.157 回答
1

您将必须添加 jquery 并在正文中使用以下内容

 ul = $('#menu'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)});
于 2012-12-15T08:42:47.067 回答