基础5 -用JQuery改变小屏幕到中屏幕下拉菜单的方向

Question

我已经实现了一个左手菜单，它由多个下拉菜单对齐到右边，所以它就像一个飞出菜单。在大屏幕上，这工作得很好。在小屏幕上，Foundation会自动改变下拉菜单，使其与底部对齐，这也很有效。

然而，在中等屏幕(如平板电脑)上，下拉菜单仍然试图向右对齐，但它的大部分都在屏幕外，无法被选中。因此，我想有它，使下拉框自动对齐到一个小屏幕和中等屏幕的底部。

我如何用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>

我已经尝试了以下操作，但没有任何反应:

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

Answer 1

无需添加更多JS的解决方案，仅使用Foundation的CSS属性与visibility class

为了将下拉内容对齐到大屏幕和更多，然后我使用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>

生活例子

Answer 2

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

下拉菜单显示在介质设备的底部。PS:如果您通过调整浏览器窗口的大小从桌面进行测试，则需要在每个断点后刷新。Foundation 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();