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/

Answer 2

我想你正在寻找这样的东西：

DEMO

诀窍是在 $（'ul li'）中添加以下内容。click（function（）{}）：

$('.arrow').css("top",$(this).offset().top+6);

编辑：

问题解决了：

New DEMO

Final DEMO：P

Answer 3

如何将顶部更改为50％

.test > .arrow {
   /*display: none;*/
    top: 50%;
...
}

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

3 个答案: