javascript - 如何自动调整此 HTML 菜单的大小以适合父级宽度？

Question

我正在将 Drupal 6 主题转换为 Drupal 7，但无法弄清楚这部分。我有以下 HTML:

<ul id="nav" class=" scaling-active scaling-ready">
<li><a href="/demos/pro/taxonomy/term/12" title="">Design</a></li>
<li><a href="/demos/pro/taxonomy/term/13" title="">Inspiration</a></li>
<li><a href="/demos/pro/taxonomy/term/14" title="">Nature</a></li>
<li><a href="/demos/pro/taxonomy/term/15" title="">Photography</a></li>
<li><a href="/demos/pro/taxonomy/term/16" title="">Technology</a></li>
<li><a href="/demos/pro/taxonomy/term/20" title="">Travel</a></li>
<li><a href="/demos/pro/taxonomy/term/17" title="">Tutorials</a></li>
<li><a href="/demos/pro/taxonomy/term/18" title="">Urban</a></li>
<li><a href="/demos/pro/taxonomy/term/19" title="">Video Games</a></li>
</ul>

在 Drupal 6 中，此主题使用的是 jquery v1.3.2，但在 Drupal 7 中内置了 jquery 1.4.4，因此这些功能似乎无法正常工作。这是 jquery 函数:

$(function(){
    clearFormFields({
        clearInputs: true,
        clearTextareas: false,
        passwordFieldText: true,
        addClassFocus: "focus",
        filterClass: "form-text"
    });
    initAutoScalingNav({
        menuId: "nav",
        sideClasses: true
    });
    ieHover('#nav li');
    $('div.gallery-block').fadeGallery({
        slideElements:'ul.gallery > li',
        pagerLinks:'ul.switcher li'
    });
    $('div.pictures-box').fadeGallery({
        slideElements:'ul.fade-gallery > li',
        pagerLinks:'ul.pictures-list li',
        title: true
    });
});

function initAutoScalingNav(o) {
    if (!o.menuId) o.menuId = "nav";
    if (!o.tag) o.tag = "a";
    if (!o.spacing) o.spacing = 0;
    if (!o.constant) o.constant = 0;
    if (!o.minPaddings) o.minPaddings = 0;
    if (!o.liHovering) o.liHovering = false;
    if (!o.sideClasses) o.sideClasses = false;
    if (!o.equalLinks) o.equalLinks = false;
    if (!o.flexible) o.flexible = false;
    var nav = document.getElementById(o.menuId);
    if(nav) {
        nav.className += " scaling-active";
        var lis = nav.getElementsByTagName("li");
        var asFl = [];
        var lisFl = [];
        var width = 0;
        for (var i=0, j=0; i<lis.length; i++) {
            if(lis[i].parentNode == nav) {
                var t = lis[i].getElementsByTagName(o.tag).item(0);
                asFl.push(t);
                asFl[j++].width = t.offsetWidth;
                lisFl.push(lis[i]);
                if(width < t.offsetWidth) width = t.offsetWidth;
            }
            if(o.liHovering) {
                lis[i].onmouseover = function() {
                    this.className += " hover";
                }
                lis[i].onmouseout = function() {
                    this.className = this.className.replace("hover", "");
                }
            }
        }
        var menuWidth = nav.clientWidth - asFl.length*o.spacing - o.constant;
        if(o.equalLinks && width * asFl.length < menuWidth) {
            for (var i=0; i<asFl.length; i++) {
                asFl[i].width = width;
            }
        }
        width = getItemsWidth(asFl);
        if(width < menuWidth) {
            var version = navigator.userAgent.toLowerCase();
            for (var i=0; getItemsWidth(asFl) < menuWidth; i++) {
                asFl[i].width++;
                if(!o.flexible) {
                    asFl[i].style.width = asFl[i].width + "px";
                }
                if(i >= asFl.length-1) i=-1;
            }
            if(o.flexible) {
                for (var i=0; i<asFl.length; i++) {
                    width = (asFl[i].width - o.spacing - o.constant/asFl.length)/menuWidth*100;
                    if(i != asFl.length-1) {
                        lisFl[i].style.width = width + "%";
                    }
                    else {
                        if(navigator.appName.indexOf("Microsoft Internet Explorer") == -1 || version.indexOf("msie 8") != -1 || version.indexOf("msie 9") != -1)
                            lisFl[i].style.width = width + "%";
                    }
                }
            }
        }
        else if(o.minPaddings > 0) {
            for (var i=0; i<asFl.length; i++) {
                asFl[i].style.paddingLeft = o.minPaddings + "px";
                asFl[i].style.paddingRight = o.minPaddings + "px";
            }
        }
        if(o.sideClasses) {
            lisFl[0].className += " first-child";
            lisFl[0].getElementsByTagName(o.tag).item(0).className += " first-child-a";
            lisFl[lisFl.length-1].className += " last-child";
            lisFl[lisFl.length-1].getElementsByTagName(o.tag).item(0).className += " last-child-a";
        }
        nav.className += " scaling-ready";
    }
    function getItemsWidth(a) {
        var w = 0;
        for(var q=0; q<a.length; q++) {
            w += a[q].width;
        }
        return w;
    }
}

在 Drupal 6 版本中，上述代码会自动将 style="width: xx"标记添加到超链接，这会导致菜单增加菜单按钮以填充其容器的宽度。

谢谢。

Answer 1

我建议扔掉旧的 javascript 并替换为 jQuery - 看到其他人已经解决了这个问题:

http://tympanus.net/codrops/2010/01/12/self-resizing-navigation-menu-with-jquery/