jQuery解决方案：如何将下拉菜单子菜单保持在屏幕内。

Question

我正在使用Bootstrap来制作下拉菜单。但是存在一个问题，如果我的下拉菜单有多级子菜单，它会超出屏幕范围，导致出现底部滚动条。

我该如何让子菜单保持在屏幕内？我需要使用jQuery解决方案。

请查看我的截图。

---

这里是游乐场：

http://jsfiddle.net/howtoplease/svLKN/

---

这里是下拉菜单的HTML代码

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
      <div class="container-fluid">
        <div class="nav-collapse">
          <ul class="nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                    <a href="#">2-level Dropdown <i class="icon-arrow-right"></i></a>
                    <ul class="dropdown-menu sub-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li class="divider"></li>
                        <li class="nav-header">Nav header</li>
                        <li><a href="#">Separated link</a></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="nav-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>         
        </div><!-- /.nav-collapse -->
      </div>
  </div>
</div>

- user007

---

如果不想超出屏幕，你希望下拉菜单的内容出现在哪里？ - AlliterativeAlice

像其他下拉菜单一样，位于父菜单的左侧。 - user007

Answer 1

这个怎么样：它会检查子菜单是否会溢出，并通过子菜单的宽度修改其位置，使其在另一侧。

$('.sub-menu').parent().hover(function() {
    var menu = $(this).find("ul");
    var menupos = $(menu).offset();

    if (menupos.left + menu.width() > $(window).width()) {
        var newpos = -$(menu).width();
        menu.css({ left: newpos });    
    }
});

http://jsfiddle.net/svLKN/4/

- Beno

---

非常感谢您的建议，但是如果您的子菜单有更深层次的话，最好使用children("ul")而不是find("ul")。 - scythargon

$('> .dropdown-menu',this) 可能是一个比 $(this).find("ul") 更好的筛选器。从技术上讲，它与 children 的作用相同，但 jQuery 可以在单个调用中进行优化。 - bradlis7