Question

我正在开发一个suckerfish风格的下拉菜单，其中包含不同大小的第一级项目（未指定明确的宽度，即width: auto;），其下拉列表为{{1} }。

为此看起来不太糟糕，下拉子元素的宽度应与父li项的宽度相同。唉，我的jQuery-fu显然缺乏，我似乎无法让它工作。或者，如果有人知道如何用CSS做到这一点，我会更加印象深刻。

菜单HTML：

text-align: center;

这是我的jQuery：

<nav id="access" role="navigation">
    <div class="menu-main-container">
        <ul id="menu-main" class="menu">
            <li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a href="#">Portfolio</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-21" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-21"><a href="#">Travel</a></li>
                    <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-22"><a href="#">Commercial</a></li>
                </ul>
            </li>
            <li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a href="#">Info</a>
                <ul class="sub-menu" style="">
                    <li id="menu-item-29" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-29"><a href="#">About us</a></li>
                    <li id="menu-item-30" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-30"><a href="#">FAQ</a></li>
                </ul>
            </li>
            <li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a href="#">Contact</a></li>
            <li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a href="#">Recent Work</a>
                <ul class="sub-menu" style="">
                     <li id="menu-item-25" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-25"><a href="#">Travel</a></li>
                     <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-26"><a href="#">Commercial</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

我认为我的一部分问题是我选择了最近的父级li.menu-item，当我需要最高级的.menu-item时（即“ul li”，而不是“ul li ul li”） “）。 知道我该怎么做吗？

非常感谢！

Answer 1

尝试以下内容：

$(document).ready(function() {
    $(".menu-main-container > ul > li").each(function() { //select all top level li tags
        $width = $(this).width(); //get the width
        $(this).find("ul > li > a").width($width); //set the width of all links within submenus
    });
});

Answer 2

$("#access ul > li > ul > li > a").each(function() {                                          
    var elmWidth = $(this).parent('li').width();
    $(this).width(elmWidth);
});

或者如果它们都是相同的宽度

$("#access ul > li > ul > li > a").width($(this).parent('li').width());

类似时，将子宽度设置为第一个父元素的宽度？

2 个答案: