用javascript对齐两个元素

Question

我有两个元素，<button>和<ul>。按钮有多个，它们都做同样的事情。当您单击按钮时，我想将ul移动到按钮（在右上角对齐）。按钮没有ID。

菜单（UL）将是绝对定位的。他们不是彼此的兄弟姐妹/父母/子女。单击该按钮时，它会调用一个函数。我希望此功能可以将UL移动到您单击的按钮的位置。

HTML：

<button class="download" onclick="showDownloadMenu()"><i class="fa fa-download" aria-hidden="true"></i></button>

<ul id="download-menu">
    <h1>Downloads</h1>
    <button id="download-close-button" onclick="hideDownloadMenu()"><i class="fa fa-times" aria-hidden="true"></i></button>
    <li><a href="/">option 1</a></li>
    <li><a href="/">option 2</a></li>
    <li><a href="/">option 3</a></li>
    <li><a href="/">option 4</a></li>
    <li><a href="/">option 5</a></li>
</ul>

JavaScript的：

选项1 - 这在我脑海中是有意义的......菜单的右侧等于按钮的右侧..

downloadMenu.right = (clickedButton.right)+'px';

左侧按钮的作品......

但是右边的按钮更左边了，肯定是错误的

选项2 - 最接近工作但不是菜单的右侧与按钮的右侧对齐，菜单的左侧是。这些至少是一致的，但它并不是在正确的地方。

downloadMenu.left = (clickedButton.right)+'px';

选项3 - 不确定，但这是最后一次尝试

downloadMenu.left = (clickedButton.left)+'px';

再一次这是一致的，甚至更接近，但现在按钮的左侧和菜单的左侧是对齐的。

所以你认为做对/右会做相反的事情，但如上所述并非如此。

Answer 1

我做了一个快速小提琴，希望这就是你的意思。

    $('button').click(function(){
            $('ul').insertAfter($(this))
    })

    button {display: block; margin-top: 20px;}

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <button>one</button>
    <button>two</button>
    <button>three</button>
    <button>four</button>

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