如何找到子菜单的宽度扩展

Question

请看图片， 我在窗口左边有一个菜单， 有时候子菜单混淆了，走出窗外， 我想找到窗外的子菜单值 ，这是我的HTML代码：

<ul class="nav">
    <li><a class="basket" href="#">مشتریان ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="employ" href="#">دعوت به همکاری
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="about-us" href="#">درباره ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
    <li><a class="contact" href="#">تماس با ما
        </a>
        <div class="submenu">
            نمونه زیر منو
        </div>
    </li>
</ul>

还有我的css：

.submenu
{
    background: #fff;
    height: 150px;
    width: 400px;
    display: none;
    position: absolute;
    opacity: 0;
    transition: opacity ease-in 0.5s;
    -webkit-transition: opacity ease-in 0.5s;
    -moz-transition: opacity ease-in 0.5s;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

.nav li:hover > .submenu
{
    opacity: 1;
    transition: opacity ease-in 0.5s;
    -webkit-transition: opacity ease-in 0.5s;
    -moz-transition: opacity ease-in 0.5s;
}

Answer 1

不确定它能否为你完成这项工作，但无论如何你都可以尝试。

您必须计算窗口宽度。 然后计算子菜单宽度和偏移量。 现在，您知道您的子菜单是否在您的窗口外，以及您的子菜单是多少。

var windowWidth = $(window).width();
var subOffsetLeft = $(this).offset().left;
var subWidth = $(this).width();

var rightOfSub = subOffsetLeft + subWidth;

if (rightOfSub > windowWidth) {
    var expendedSize = rightOfSub - windowWidth;
    alert(expendedSize)
}

您可以在 Fiddle 中看到它正常运行。希望它有所帮助。

编辑＃1：

如果您想调整子菜单以防止它们离开窗口，您可以根据它们的数量来修改边距： Fiddle