jQuery：我的下拉菜单中的getPos

I'm trying to make a jQuery drop-down menu, but usable anywhere on my page. I would like it to be dynamic (as each element that contains the trigger class and that it is positioned perfectly). To do this, I need to have a jQuery code that replace my drop-down with the element clicked like this example (at the center of the clicked text): http://prntscr.com/7hw91t on this site: https://www.invisionpower.com/

我正在尝试创建一个jQuery下拉菜单，但可以在我的页面上的任何位置使用。我希望它是动态的（因为每个元素包含触发器类并且它完美定位）。要做到这一点，我需要一个jQuery代码替换我的下拉列表，点击该示例的元素（在单击文本的中心）：http：//prntscr.com/7hw91t：https：/ /www.invisionpower.com/

My HTML code:

我的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>   

This code is referred to the elements that, when clicked, will open the drop-down: http://prntscr.com/7hwa7m The "drop-down-menu-trigger" is the class that will trigger the opening of the drop-down menu.

此代码是指单击时将打开下拉列表的元素：http：//prntscr.com/7hwa7m“下拉菜单触发器”是将触发打开放置的类 - 下方菜单。

This is the drop-down-menu code that is placed at the bottom of my index.php:

这是放在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>

And my JS code:

我的JS代码：

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

my CSS:

我的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;
}

I would like to have help for this, so thanks to those who will try to help me.

我想为此提供帮助，感谢那些愿意帮助我的人。

1 个解决方案

#1

Possibly something like this but not tested, you should put or render what you have in jsfiddler so we can see what your after.

可能是这样的但没有经过测试，你应该在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);

Updated Answer :

There was several changes which included CSS and some offset in jquery for getting the carret to the middle off the menu, here is the updated version on fiddler

有几个变化，其中包括CSS和jquery中的一些偏移，以便将carret放到菜单中间，这里是fiddler的更新版本

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

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

here is the screenshot of updated code working with your menu

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