Question

我正在使用基础设计我的网站中的响应式菜单。我有阿拉伯语和英语网站设置。英文版正确显示但在阿拉伯网站上我想反转菜单顺序，但仅在触发移动菜单时。 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));        
    })
})

Answer 2

看起来Foundation有一个功能可以让你检查媒体查询是否存在。因此，使用这个，我们可以首先检查“小”媒体查询（可能是移动客户端的大小），如果它在那里，那么我们可以使用一些jQuery来反转菜单项。

javascript / jQuery：

if (window.matchMedia(Foundation.media_queries.small).matches) {

    var $menus = $(".top-bar-section").find("ul");
    $menus.each(function(){
        var $ul = $(this);        
        $ul.children('li').each(function(){
            $ul.prepend($(this));        
        });
    });
}

在阿拉伯网站移动菜单上颠倒菜单项的顺序

2 个答案: