0

我正在研究一个吸盘式下拉菜单，其中包含不同大小的第一级项目（没有指定明确的宽度，即width: auto;），然后有下拉菜单text-align: center;。

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

菜单 HTML：

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

这是我的 jQuery：

jQuery(document).ready( function() {
    jQuery('#access ul ul li a').width( function() {
        jQuery(this).parent('li.menu-item').width() 
    });
});

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

非常感谢！

4

2 回答 2

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
    });
});
于 2012-01-15T23:33:08.917 回答
0 
$("#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());
于 2012-01-15T23:15:29.493 回答