1

请看图片，我在窗口左侧有一个菜单，有时子菜单混淆并走出窗口，我想找到走出窗口的子菜单的值，这是我的 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;
}

4

1 回答 1

2

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

你必须计算你的窗口宽度。然后计算您的子菜单宽度和向左偏移。现在，您知道您的子菜单是否超出您的窗口，以及您的子菜单超出了多少。

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：

如果您想调整子菜单以防止它们超出窗口，您可以根据它们的数量来修改边距：小提琴

于 2013-10-09T13:41:48.277 回答