【问题标题】：Find out how wide a set of children is找出一组孩子的范围有多大
【发布时间】：2014-12-03 08:17:17
【问题描述】：

我正在开发一个 WP 主题，但在导航方面遇到了一些问题。

基本标记如下所示：

#navbar
    ul.main-nav
        li.menu-item.drop-submenu
            ul.submenu
                li.menu-item.drop-submenu
                    ul.submenu
                        li.menu-item.drop-submenu
                           etc. (any menu item can have unlimited submenus)
        li.menu-item.drop-submenu
            ul.submenu
                li.menu-item
                li.menu-item
        li.menu-item

现在我遇到的问题是，具有 2 个或更多子菜单的菜单项跨越右侧最终会溢出视口。我正在使用 jquery 来计算子菜单的宽度和偏移量，并应用一个类，该类将导致子菜单在左侧下降，而不是它们导致溢出。对于“顶级”子菜单，这相对容易做到，但我正在为嵌套子菜单绘制空白。

基本上，我正在寻找一种方法来找出最右边的子菜单集，而不是所有嵌套子菜单的集体宽度，如果这有意义的话......

我什至不确定如何正确解释这一点，所以如果有不清楚的地方，我会尽力澄清。在此先感谢您，我们将不胜感激任何朝着正确方向的推动。

编辑：做了一个JSFiddle

【问题讨论】：

我认为你在解释方面做得很好......然而，没有什么比 Codepen 或小提琴更好地解释了。你能把其中一个拍在一起吗？很乐意提供帮助。
完成，在编辑中添加:)
你忘了你的 jquery 了吗？
抱歉，我认为它没有帮助，但我将它添加进去并进一步编辑了小提琴。第二个菜单项被拉到左边，它的子菜单将下降到左边，这部分脚本有效。但是，将鼠标悬停在第 1 项中的第三个子菜单上，您会看到问题。多级功能未完成，因为我正在考虑如何解决这个问题，结果卡住了。
检查我的编辑；不是最漂亮的，但它有效。

标签： javascript jquery css

【解决方案1】：

基本上，我正在寻找一种方法来找出哪些子菜单集跨越最右边，但不是所有嵌套的集体宽度潜艇，如果这有任何意义......

因此，这将选择所有最里面的子菜单，在您的情况下*（对吗？）* 是最右边的子菜单。

var $rightmost = $(".main-nav").find('.submenu:not(:has(.submenu))');

您可以通过以下方式重复选择元素，将 .left 类添加到所有外围 .submenus 直到 all 通过您正在运行的视口内检查。也许把它放在一个while循环中，看看你的查询结果是否有长度，然后在里面运行你的检查和处理逻辑。

var $rightmost = $(".main-nav").find('.submenu:not(:has(.submenu)):not(.left)');

哈哈。已经很晚了，我神志不清，所以如果这很糟糕或没有明确的论点，请说出来！ 诚然：我没有检查这个，所以如果它很时髦，也请说出来。

假设

正因为如此，

我正在使用 jquery 来计算子菜单的宽度和偏移量应用一个将导致子菜单放在左侧的类它们是否会导致溢出。

我假设您已经编写了视口逻辑。

编辑：this works

虽然它可以被优化......而且我根本没有按照我提出的我认为很酷的方式来做。 GSD

【讨论】：

感谢您的帮助，这绝对是朝着正确方向迈出的一步。而不是向下遍历，我应该像你建议的那样从最后一个子菜单向上遍历。我是不是觉得自己很蠢哈哈。但是，这并不理想，因为第一级将下降到右侧，如果下一个溢出，它将下降到左侧，从而与父级重叠。我会再修补一些并尝试弄清楚。不过，您的回答很有帮助，所以我会将其标记为已接受的答案，并在我弄清楚后在此处发布我的最终解决方案。
P.S.去睡觉吧伙计，我也有熬夜的习惯，但很快意识到当我极度疲倦时我不能做很多工作:)
哦，我想我只是在考虑文字换行。在这种情况下，只需选择所有最里面的子菜单，看看它们是否重叠；如果是这样，请将.left 类添加到所有父子菜单。
你可以像$(this).parents('.submenu').addBack().addClass("left");那样做
大声笑。激情项目一整夜，rando StackO 搞砸了，哎呀……我现在有一份真正的工作。很高兴我能帮上忙，伙计。干杯。

【解决方案2】：

您可以查看Jquery positionCalculator，它允许您的脚本自动检查冲突（请参阅页面底部的 Bootstrap 下拉示例）。

【讨论】：

谢谢，这是一个有用的脚本，以后肯定会派上用场，但不适合我当前的问题，主要是因为子菜单绝对位于其父项之后直到悬停，因此它不会检测任何碰撞。