0

私は、さまざまなサイズの第1レベルのアイテム（明示的な幅が指定されていない、つまり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 に答える