内部（嵌套）li的jquery位置函数返回零

发布于 2024-10-15 00:45:03 字数 3166 浏览 4 评论 0原文

我有嵌套的 li，用于水平子导航菜单。我试图使用jquery的position()函数获取子li的li的位置，但它总是返回零。相同的功能适用于父李。

HTML 代码

<html>
    <head>
        <title>test</title>
        <script type='text/javascript' src='js/jquery-1.4.2.js'></script>
        <link rel="stylesheet" href="css/menu_style.css" type="text/css" />
        <script>
            $(window).load(function() {
                jQuery(document).ready(function() {
                    jQuery('.addchar').live('click', function(event) {
                        var position = $(this).position();
                        alert(position.left);
                    });
                });
            });
        </script>

    </head>

    <body>

        <div id="content">
            <div class="menu" id="menu">
                <ul>
                    <li><a href="#" class="addchar">A</a>
                        <ul>
                            <li><a href="#" class="addchar">Aword</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="addchar">B</a>
                        <ul>
                            <li><a href="#" class="addchar">Bword </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS 代码

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    position:relative;/*should be relative*/
    font-size:16px;
    font-weight:bold;
}
.menu ul{
    background:#333333;
    height:40px;
    list-style:none;
    margin:0;
    padding:0;
    width:900px;
}

.menu li{
    float:left;
    padding:0px;
    width:28px;
    font-size:16px;
}
.menu li a{
    background:#333333 url("../img/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    font-size:14px;
    line-height:35px;
    margin:0px;
    padding:0px 12px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("../img/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:900px;
    float:right;
    z-index:200;
}
.menu li:hover ul{
    display:block;

}
.menu li li {
    background:url('../img/sub_sep.gif') bottom left no-repeat;
    display:block;
    margin:0px;
    padding:0px;
    width:36px;
}
.menu li:hover li a{
    background:none;

}
.menu li ul a{
    display:block;
    height:35px;
    font-size:14px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('../img/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

原文

I have nested li, which is for horizontal subnav menu. I am trying to get the position of li of child li using jquery's position() function but it is returning zero always. Same function is working for parent li.

Html Code

<html>
    <head>
        <title>test</title>
        <script type='text/javascript' src='js/jquery-1.4.2.js'></script>
        <link rel="stylesheet" href="css/menu_style.css" type="text/css" />
        <script>
            $(window).load(function() {
                jQuery(document).ready(function() {
                    jQuery('.addchar').live('click', function(event) {
                        var position = $(this).position();
                        alert(position.left);
                    });
                });
            });
        </script>

    </head>

    <body>

        <div id="content">
            <div class="menu" id="menu">
                <ul>
                    <li><a href="#" class="addchar">A</a>
                        <ul>
                            <li><a href="#" class="addchar">Aword</a></li>
                        </ul>
                    </li>
                    <li><a href="#" class="addchar">B</a>
                        <ul>
                            <li><a href="#" class="addchar">Bword </a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS CODE

.menu{
    border:none;
    border:0px;
    margin:0px;
    padding:0px;
    position:relative;/*should be relative*/
    font-size:16px;
    font-weight:bold;
}
.menu ul{
    background:#333333;
    height:40px;
    list-style:none;
    margin:0;
    padding:0;
    width:900px;
}

.menu li{
    float:left;
    padding:0px;
    width:28px;
    font-size:16px;
}
.menu li a{
    background:#333333 url("../img/seperator.gif") bottom right no-repeat;
    color:#cccccc;
    display:block;
    font-weight:normal;
    font-size:14px;
    line-height:35px;
    margin:0px;
    padding:0px 12px;
    text-align:center;
    text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
    background: #2580a2 url("../img/hover.gif") bottom center no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.menu li ul{
    background:#333333;
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    border:0px;
    position:absolute;
    width:900px;
    float:right;
    z-index:200;
}
.menu li:hover ul{
    display:block;

}
.menu li li {
    background:url('../img/sub_sep.gif') bottom left no-repeat;
    display:block;
    margin:0px;
    padding:0px;
    width:36px;
}
.menu li:hover li a{
    background:none;

}
.menu li ul a{
    display:block;
    height:35px;
    font-size:14px;
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px;
    text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
    background:#2580a2 url('../img/hover_sub.gif') center left no-repeat;
    border:0px;
    color:#ffffff;
    text-decoration:none;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

苍景流年 2024-10-22 00:45:03

你是指以像素为单位的位置吗？ .position() 为您提供相对于偏移量的位置父级。由于每个菜单链接都是父级的唯一子级，因此返回值将始终为零（如果您不进行一些花哨的定位）。

您可能需要 offset()，它为您提供相对于文档。

如果你想获取所有菜单项集合中菜单项的索引，那么你需要使用 index()：

$('#menu ul ul .addchar').index(this);

You mean position in terms of pixels? .position() gives you the position relative to the offset parent. As each of your menu links is the only child of the parent, the return value will always be zero (if you don't do some fancy positioning).

You might want offset(), which gives you the position relative to the document.

If you want to get the index of the menu item in the set of all menu items, then you need to use index():