基础5 - 使用JQuery更改下拉菜单的方向，用于中小屏幕

问题描述

我已经实施了一个左侧的菜单，它包含多个向下对齐的下拉菜单，所以它就像一个飞出菜单。在一个大屏幕上，这工作正常。在小屏幕上，基金会自动更改下拉菜单以对齐底部，这也可以正常工作。但是，在平板电脑的中等屏幕上，下拉列表仍然尝试向右对齐，但绝大多数屏幕不能被选中。因此，我想拥有它，以便下拉菜单自动对齐在中小屏幕上的底部。

如何使用JQuery？

 < ul class =side-nav nav-bar vertical> 
< li> 
< a href =＃data-options =is_hover：true; align：right;数据下拉= drop_2464272 >元件及LT; / A> 
< ul id =drop_2464272class =small f-dropdowndata-dropdown-content> 
< li> < a href =＃>塔箱附件< / a>< / li> 
< li> < a href =＃>冷却< / a>< / li>< / ul> 
< / li> 
< / ul> 
  

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

data（'options'，'is_hover：true; align：bottom;）; $ {pre> $


解决方案

现场演示：

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

HTML：

 < ul class =side-nav nav-bar vertical> 
< li> 
< a href =＃data-options =align：right; is_hover：true; data-dropdown =drop_2464272class =button showDropdown>组件< / a> 
< ul id =drop_2464272class =small f-dropdowndata-dropdown-content> 
< li> < a href =＃>塔箱附件< / a>< / li> 
< li> < a href =＃>冷却< / a>< / li> 
< / ul> 
< / li> 
< li> 
< a href =＃data-options =align：right; is_hover：true; data-dropdown =drop_2464273class =button showDropdown>组件< / a> 
< ul id =drop_2464273class =small f-dropdowndata-dropdown-content> 
< li> < a href =＃>塔箱附件< / a>< / li> 
< li> < a href =＃>冷却< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
  

JS：

 code> 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（）; 
  

I have implemented a left hand menu which consists of multiple dropdowns which align to the right, so its like a fly out menu. On a large screen this works fine. On a small screen Foundation automatically changes the dropdown to align to the bottom, which also works fine.

However, on a medium screen ie, tablet, the dropdown still tries to align to the right but the majority of it is off screen and cannot be selected. I would therefore like to have it so that the dropdown automatically aligns to the bottom on a small and medium screen.

How can I do this with 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>

I have tried the following bt nothing happens:

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

解决方案

Live demo : http://codepen.io/mouhammed/pen/zIHjJ

The dropdown is shown at the bottom on medium device.PS : If you test from desktop by resizing browser window, you need to refresh after each breakpoint. Foundation js must be called after your custom 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();

这篇关于基础5 - 使用JQuery更改下拉菜单的方向，用于中小屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！