基金会5 - 对于小的jQuery下拉的变化方向中屏幕(Foundation 5 - change

我已经实现了其由多个下拉菜单，其右对齐的左侧菜单，所以它像一个飞出来的菜单。 在大屏幕上能正常工作。 在小屏幕上基金会将自动更改下拉对齐的底部，这也能正常工作。

然而，在一个中等屏幕即片剂，下拉仍然尝试右对齐，但它的大部分是关闭屏幕，无法选择。 因此，我想有它，这样的下拉自动对齐到下一个中​​小屏幕上。

我怎样才能用jQuery做到这一点？

<ul class="side-nav nav-bar vertical">
<li>
<a href="#" data-options="is_hover:true;align:right;" data-dropdown="drop_2464272">Components</a>
<ul id="drop_2464272" class="small f-dropdown" data-dropdown-content>
<li> <a href="#">Accessories for tower cases</a></li>
<li> <a href="#">Cooling</a></li></ul>
</li> 
</ul>

我曾尝试以下BT什么也没有发生：

 $(".side-nav").data('options', "is_hover:true;align:bottom;");

Answer 1:

现场演示： http://codepen.io/mouhammed/pen/zIHjJ

下拉显示在媒体装置上的底部。 PS：如果你通过调整浏览器窗口从桌面测试，则需要每个断点后刷新。 基金会JS必须自定义的jQuery后调用。

HTML：

<ul class="side-nav nav-bar vertical">
  <li>
    <a href="#" data-options="align:right;is_hover:true;" data-dropdown="drop_2464272" class="button showDropdown">Components</a>
    <ul id="drop_2464272" class="small f-dropdown" data-dropdown-content>
      <li> <a href="#">Accessories for tower cases</a></li>
      <li> <a href="#">Cooling</a></li>
    </ul>
  </li>
  <li>
    <a href="#" data-options="align:right;is_hover:true;" data-dropdown="drop_2464273" class="button showDropdown">Components</a>
    <ul id="drop_2464273" class="small f-dropdown" data-dropdown-content>
      <li> <a href="#">Accessories for tower cases</a></li>
      <li> <a href="#">Cooling</a></li>
    </ul>
  </li>
</ul>

JS：

var mq = window.matchMedia( "(min-width: 40.063em) and (max-width: 64em)" );
if (mq.matches) {
  var buttons = document.getElementsByClassName('showDropdown');
  for (var i = 0; i < buttons.length; ++i) {
    var button = buttons[i];  
    button.setAttribute("data-options","align:bottom;is_hover:true;");
  }

}
$(document).foundation();

Answer 2:

溶液wihtout增加更多的JS，只能用基金的CSS属性与公开程度等级

要对齐下拉内容为大屏幕和更正确的，然后我使用类show-for-large-up 。

要对齐下拉内容的底部为中，小屏幕，然后我用的是类hide-for-large-up

全码：

<div class="show-for-large-up">
    <a href="#" data-dropdown="drop1" data-options="align:right;" class="button">Has Dropdown</a>

</div>

<div class="hide-for-large-up">
    <a href="#" data-dropdown="drop1" data-options="align:bottom;" class="button">Has Dropdown</a>
</div>



<ul id="drop1" class="f-dropdown" data-dropdown-content>
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
</ul>

活生生的例子

文章来源: Foundation 5 - change direction of dropdown with JQuery for small to medium screens