javascript - 如何根据单击的列表定位箭头

Question

我正在处理一种标记，它是一种菜单。所以这是我的查询，我的网页上有 ul li。当我们要点击的时候，它会像弹窗一样在右边显示不同的内容。除了我的箭，一切都很顺利。当我单击该元素时，我的箭头需要定位到 li 的中心，而此处箭头显示在不同的位置。谁能帮我解决这个问题。

标记

<ul>
    <li>text1</li>
    <li>text2</li>
    <li>text3</li>
    <li>text4</li>
    <li>text5</li>
    <li>text6</li>
    <li>text7</li>
    <li>text8</li>
</ul>
<div class='test'>
   <div class='arrow'></div>
<div class='test-con'>
<p> sample text sample text sample text sample text sample text sample text sample text sample text sample textsample text sample text sample text sample text sample text sample text sample text sample textsample text sample text sample text sample textsample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text</p></div>
</div>

JQUERY

$('ul li').click(function () {
    $('.test').show();
});
$('ul,.test').click(function (e) {
    e.stopPropagation();
    $('html').click(function () {
        $('.test').hide();
    });
});

注意:我这里的 UL 会滚​​动显示不同的菜单，所以箭头需要相应地放置。

DEMO

提前致谢

Answer 1

尝试这样的事情:

JS:

$('ul li').click(function () {
    var p = $(this).offset().top; //Get offset
    $('.test .arrow').css('top', p + 'px'); //Set offset
    $('.test').show(); //finally show
});
$('ul,.test').click(function (e) {
    e.stopPropagation();
    $('html').click(function () {
        $('.test').hide();
    });
});

您可能需要进行一些调整。

演示:http://jsfiddle.net/lotusgodkk/y67cksp0/7/