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

我已经实现了一个左手菜单，其中包含多个向下对齐的下拉菜单，因此它就像一个飞出菜单。 在大屏幕上，这很好用。 在一个小屏幕上，Foundation会自动更改下拉列表以对齐底部，这也可以正常工作。

但是，在中等屏幕即平板电脑上，下拉列表仍然会尝试向右对齐，但大部分都在屏幕外，无法选择。 因此，我希望它能让下拉菜单在中小屏幕上自动对齐到底部。

我怎么能用JQuery做到这一点？

 
 Components 
 
 Accessories for tower cases
 
 Cooling
 
  

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

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

Answer 1

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

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

HTML：

 
 
 Components 
 
 Accessories for tower cases
 
 Cooling
 
 
 
 Components 
 
 Accessories for tower cases
 
 Cooling
 
 
  

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 with Visibilty Class的 CSS属性

要将下拉内容与大屏幕和更多屏幕右侧对齐，请使用show-for-large-up 。

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

完整代码：

 
 Has Dropdown 
 
 Has Dropdown 
 
 
This is a link
 
This is another
 
Yet another
  

现场例子