javascript - 通过偏移定位绝对元素

Question

我在页面上有一个下拉菜单，并且希望该菜单从主项目下拉到左侧。它现在下降到右侧。

我有一个jsfiddle在这里。

正如您所看到的，它现在会下降到右侧并调整页面大小以适应。我希望菜单移至左侧并保持所有尺寸不变。有没有简单的方法。我知道 jQuery 菜单小部件可以做到这一点，但我还有其他问题。

该按钮位于页面中间的某个位置，因此理想情况下，我希望下拉菜单相对于父级下拉，而不是像 jsfiddle 显示的那样固定在右侧。希望这能澄清。

代码:

文档就绪

    $(document).ready(function () {
    // Menus
    $('ul.menu').hide();

    $('ul#viewMenu li').hover(function () {
        $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
    }, function () {
        $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
    });
    });

CSS

    ul#viewMenu   { overflow: hidden; }

    ul#viewMenu li { float:left; display: block; text-align: left; line-height: 40px; }
    ul#viewMenu li a { line-height: 40px; }

    ul#viewMenu ul.menu { position: absolute; }
    ul#viewMenu ul.menu li { float: none; }

HTML

    <div style="display: inline-block; float: right;">
<ul id="viewMenu" style="list-style: none; margin: 0; padding: 0;">
    <li style="display: block; float: left;"> <a class="nav-button view-type-button" style="text-align: center;" href="#"
        title="Change the things.">
                <span>
                    <img src="~/Content/themes/base/images/empty.png" style="height: 48px; width: 49px;" alt="Things" />
                </span>
            </a>

        <ul class="view-menu-item view-menu-bottom-right menu"
        style="width: 170px !important">
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing1-calendar-button"></span>
                        <span>This 1</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing2-calendar-button"></span>
                        <span>This 2</span>
                    </a>

            </li>
            <li> <a class="nav-button" href="#" title="View data.">
                        <span class="thing3-calendar-button"></span>
                        <span>This 3</span>
                    </a>

            </li>
        </ul>
    </li>
</ul>

Answer 1

事实证明我需要做的就是从 jQuery 偏移值获取当前绘制的位置。然后设置绝对元素的 CSS 位置。简单...当您知道如何做时!

var position = $('ul#viewMenu ul.menu').offset();

$('ul#viewMenu ul.menu').css({ top: (position.top) + 'px', left: (position.left - 160) + 'px' });

$('ul.menu').hide();

$('ul#viewMenu li').hover(function () {
    $(this).children('ul.menu').animate({ opacity: 'show' }, 'slow');
}, function () {
    $(this).children('ul.menu').animate({ opacity: 'hide' }, 'fast');
});