javascript - 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/

这是与您的菜单一起使用的更新代码的屏幕截图