Question

我有以下的jsFiddle。这个想法是，当显示一个太长的上下文菜单项时，它会使用省略号进行渲染，但是在鼠标悬停时它会翻阅文本。

有问题的代码：

//Provides helper methods for non-specific functionality.
define('helpers', [], function () {
    'use strict';

    return {
        scrollElementInsideParent: function(element, parent) {
            //  Scroll the element if its too long to read.
            $(element).mouseover(function () {

                var distanceToMove = $(this).width() - $(parent).width();

                console.log("My width and parent width:", $(this).width(), $(parent).width());

                $(this).animate({
                    marginLeft: "-" + distanceToMove + "px"
                }, {
                    //  Just a feel good value; scales as the text gets longer
                    duration: 15 * distanceToMove,
                    easing: 'linear'
                });

            }).mouseout(function () {
                $(this).stop(true).animate({ marginLeft: 0 });
            });
        }
    };

这里我记录了在宽度上滚动的元素及其父元素宽度。控制台输出：

我的宽度和父宽度：360 230

但在查看指标时这似乎不正确：

enter image description here

为什么会这样？

Answer 1

在您的代码中，parent参数引用<ul>。使用$(this).parent()获取<li>

DEMO： http://jsfiddle.net/EsL2X/

$（li）.width（）返回包含填充的值？

1 个答案: