jquery - 反转阿拉伯语网站移动菜单上菜单项的顺序

Question

我正在使用 Foundation 在我的网站上设计响应式菜单。我有阿拉伯语和英语网站设置。英文版显示正确，但在阿拉伯语网站上我想颠倒菜单顺序，但只有在触发移动菜单时才可以。 http://www.abdulazizlp.com/arabic/home-1

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>

Answer 1

可能是这样的

http://jsfiddle.net/xk7d1hre/

HTML

<ul class="right">
      <li class="active"><a href="#">1 Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">2 Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">1 First link in dropdown</a></li>
          <li class="active"><a href="#">2 Active link in dropdown</a></li>
        </ul>
      </li>
</ul>

JQ:

$('ul').each(function(){
    $ul=$(this);        
    $ul.find('li').each(function(){
        if($(this).parents('.dropdown').size()==0)        
        $ul.prepend($(this));        
    })
})

$('ul.dropdown').each(function(){
    $ul=$(this);        
    $ul.find('li').each(function(){    
        $ul.prepend($(this));        
    })
})