javascript-定位jQuery下拉菜单,使其完全显示在移动设备的屏幕上

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-定位jQuery下拉菜单,使其完全显示在移动设备的屏幕上，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2757字，纯文字阅读大概需要4分钟。

内容图文

我有一个基本的jQuery下拉菜单,正在移动设备(特别是手机)上对其进行测试.

我遇到的一个问题是,右侧的子菜单有时会超出屏幕边缘,因为一个或多个项目中的文本太长.用户当然可以稍微向右滚动,但这不是一个很好的解决方案.还有一个类似的问题here,但是我无法获得建议的答案(因为我还是JS / jQuery的新手,所以我很困惑.)

总体思路似乎是获取当前子菜单的左侧位置宽度(确保先显示它们,然后再次隐藏它们或在用户点击菜单时显示它们并移动它们),然后查看该值是否大于屏幕宽度.如果是,则应将其向左移动该差值.但是,我的尝试似乎对元素没有任何作用,并且菜单始终部分显示在屏幕外.目前,我有这个(在身体加载后运行)：

var menus = $('#navbar').find('.subMenu');
menus.show();
menus.each(function(index) {
  var offsetMenu = $(this).offset();
  var diff = screen.width - ($(this).outerWidth + offsetMenu.left);
  if(diff < 0) {
    $(this).offset({top:offsetMenu.top, left:offsetMenu + diff});
  }
  });
menus.hide();

jQuery版本为1.7.2,HTML结构如下(简化版)：

<div id="navbar">
  <ul>
    <li class="dropdown"><a href="#">Link A</a></li>
    <li class="dropdown"><a href="#">Link B</a>
      <ul class="subMenu">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </li>
  </ul>
</div>

我该如何工作？

编辑：这也是相关的CSS.

#navbar ul.subMenu {
    position:absolute;
    display:none;
    background-color:#FFAF1E;
}
#navbar ul.subMenu li {
    clear:both;
}
#navbar a {
    text-decoration:none;
    color:#0C1F6E;
    display:block;
    padding-right:10px;
    padding-left:10px;
}

解决方法:

我终于有了以下工作：

function adjustSubMenus()
  {
      var menus = $('#navbar').find('.subMenu');
      menus.each(function(){
          $(this).css("left","");
          adjustSingleMenu($(this))
          } );
  }
  function adjustSingleMenu(element)
  {
      element.show();
      var thisMenuWidth = element.outerWidth();
      var thisMenuPos = element.offset();
      var diff = (thisMenuWidth + thisMenuPos.left) - window.outerWidth;
      if(diff > 0) {
          element.css("left", function() { return thisMenuPos.left - diff; });
      }
      element.hide();
  }
  $('body').ready(function() {
      $(window).resize(adjustSubMenus());
      if(window.outerWidth <= 720) {
          $('html').mousedown(function() {
              $('#navbar').find('.subMenu').each(function(index) { 
                if($(this).is(":visible") ) {
                    $(this).css("left","");
                    $(this).hide(); 
                    }
              } );
          });

          $('#navbar').mousedown(function(event) {
              event.stopPropagation();
          });

          $('.dropdown').mousedown(function() {
              var ele = $(this).find('.subMenu');
              $('#navbar').find('.subMenu').each(function(index) { 
                if(!$(this).is(ele) && $(this).is(":visible") ) {
                    $(this).css("left","");
                    $(this).hide(); 
                    }
              } );
              if(ele.is(":visible")) {
                  ele.css("left","");
                  ele.hide();
              }
              else {
                  adjustSingleMenu(ele);
                  ele.show();                 
              }
              });
      }
      else
      {
          $('.dropdown').hover(
              function() { $(this).find('.subMenu').stop(true,true).slideDown("fast"); },
              function() { $(this).find('.subMenu').stop(true,true).hide(); } 
          );
      }
  });

唯一需要注意的是,如果在更改手机方向时打开菜单,则菜单可能会出现在屏幕外.关闭并重新打开菜单将解决此问题.其他一切都完美运行.

内容总结

以上是互联网集市为您收集整理的javascript-定位jQuery下拉菜单,使其完全显示在移动设备的屏幕上全部内容，希望文章能够帮你解决javascript-定位jQuery下拉菜单,使其完全显示在移动设备的屏幕上所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端