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>

我试过以下bt没有任何反应：

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

Answer 1

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

下拉列表显示在中型设备的底部。 PS：如果您通过调整浏览器窗口大小从桌面进行测试，则需要在每个断点之后刷新。必须在自定义jQuery之后调用基础js。

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

没有添加更多 JS 的解决方案，只使用Foundation的CSS属性Visibilty 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>

LIVE EXAMPLE

基础5 - 使用JQuery改变下拉方向，适用于中小屏幕

2 个答案: