jQuery:我下拉菜单的getPos

Question

我正在尝试做一个jQuery下拉菜单，但在我的页面上任何地方都可以使用.我希望它是动态的(因为每个元素都包含触发器类，并且它的位置非常完美)。要做到这一点，我需要一个jQuery代码，它将我的下拉列表替换为像下面这样单击的元素(位于单击文本的中心)：http://prntscr.com/7hw91t在这个站点上：https://www.invisionpower.com/。

我的HTML代码：

<ul>
    <li class="more">
        <a href="#" class="drop-down-menu-trigger">More</a>
    </li>
    <li class="more">
        <a href="#" class="drop-down-menu-trigger">Second Menu</a>
    </li>
</ul>   

此代码引用了当单击将打开下拉菜单的元素：http://prntscr.com/7hwa7m "drop-down-menu-trigger“是将触发下拉菜单打开的类。

这是放置在我的index.php底部的下拉菜单代码：

    <div id="more-drop-down-menu" class="drop-down-menu">
        <ul>
            <li>
                <a class="modal-window-trigger" name="modal-window-faq" id="faq" href="faq.php">Frequently Asked Questions</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
            <li>
                <a href="faq.php">Test</a>
            </li>
        </ul>
    </div>
</div>

以及我的JS代码：

(function($)
{
    $(".drop-down-menu-trigger").click(function(e)
    {
        e.preventDefault();
        $(".drop-down-menu").css({"visibility": "visible"});
    });
})(jQuery);

我的CSS

.drop-down-menu
{
    background-color: #FFFFFF;
    position: absolute;
    top: 188px;
    right: 0;
    box-shadow: 0 15px 110px rgba(0, 0, 0, 0.2);
    border-radius: 3px;
    visibility: hidden;
}

.drop-down-menu:before
{
    right: 10px;
    bottom: 100%;
    margin-left: -15px;
    border: 15px solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: #FFFFFF;
}

.drop-down-menu a
{
    display: block;
    color: #000000;
    padding: 10px;
}

.drop-down-menu a:hover
{
    background-color: #F5F5F5;
}

我想在这方面得到帮助，所以感谢那些愿意帮助我的人。

Answer 1

可能是这样的，但没有经过测试，您应该在jsfiddler中放置或呈现您所拥有的内容，这样我们就可以看到您的后续部分。

(function($)
{
    $(".drop-down-menu-trigger").click(function(e)
    {
         e.preventDefault();

        //get location offset css
       var leftPos = $(this).offset().left,
            topPos = $(this).offset().top;

       $(".drop-down-menu").css({
           "visibility": "visible",
           "left": leftPos,
           "top": topPos
           });

    });
})(jQuery);

最新答复：

有几处更改，包括CSS和jquery中的一些偏移量，以使carret从菜单中间移出，这是最新版本的fiddler。

http://jsfiddle.net/screepts/rh2w16of/2/

下面是使用菜单更新代码的屏幕截图

​

​