修改：this works

Question

我正在研究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来计算子菜单的宽度和偏移量，并应用一个类，该子类将导致子菜单在左侧下降，而不是它们会导致溢出。这对于顶级＆＃34;相对容易。子菜单，但是我为嵌套的子菜单画一个空白。

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

我甚至不确定如何正确解释这一点，所以如果事情不清楚，我会尽力澄清。提前谢谢，我们非常感谢任何正确方向的推动。

编辑：制作JSFiddle

Answer 1

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

Answer 2

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

所以，这将选择所有最里面的子菜单，在你的情况下*（右？）*是最右边的那些。

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

您可以通过以下方式重复选择元素，向所有异常.left添加.submenu课程，直到所有通过视口内检查您的身份运行。也许把它放在while循环中，查看你的查询结果是否有长度，然后运行你的检查和处理逻辑。

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

洛尔。在这里已经很晚了，而且我很神志不清，所以如果这很糟糕或没有明确的论点，那就说吧！ 不可否认：我没有检查过这个问题，所以如果它很时髦也会说出来。

假设

因此，

我使用jquery来计算子菜单的宽度和偏移量应用一个类，该类将导致子菜单放在左侧它们应该导致溢出吗？

我假设您已经编码了视口逻辑，我的操作。

修改：this works

虽然可以进行优化......但我并没有按照我提出的我认为酷的方式做到这一点。的 GSD

了解一组孩子的宽度

2 个答案:

假设

修改：this works