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

How to position the arrow according to list clicked

本文关键字：定位 列表 何根 单击      更新时间：2023-09-26

我正在处理一个标记，它是一种菜单。所以这是我的查询，我的网页上有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>

查询

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

注意：我在这里使用的UL将滚动显示不同的菜单，因此需要相应地放置箭头。

演示

提前感谢

试试这样的东西：

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/

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

演示

诀窍是在$（'ul-li'）中添加以下内容。点击（function（）｛｝）:

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

编辑：

解决问题：

新DEMO

最终演示：p

将顶部更改为50%怎么样

.test > .arrow {
   /*display: none;*/
    top: 50%;
...
}
相关文章：