fonction de la position de jquery pour intérieurs (imbriqués) retourne zéro li

StackOverflow https://stackoverflow.com/questions/4861237

  •  27-10-2019
  •  | 
  •  

Question

Je li imbriqué, qui est pour le menu subnav horizontal. Je suis en train d'obtenir la position de li li de l'enfant en utilisant la fonction position jquery () mais il revient toujours à zéro. La même fonction travaille pour li mère.

code 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>

CODE 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;
}
Était-ce utile?

La solution

Vous voulez dire la position en termes de pixels? .position() vous donne la position par rapport au parent de décalage . Comme chacun de vos liens de menu est le seul enfant du parent, la valeur de retour sera toujours zéro (si vous ne faites pas une position de fantaisie).

Vous pouvez offset() , ce qui vous donne la position par rapport au document.

Si vous voulez obtenir le index de l'élément de menu dans l'ensemble de tous les éléments de menu, vous devez utiliser index() : 

$('#menu ul ul .addchar').index(this);
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top