javascript - 第三级菜单宽度

Question

我有一个向下滑动的菜单。在 HTML 中我有:

<menu>
    <li id="vysledky"><a href="#">Výsledky</a>
        <ul class="menu2">
            <li>2008
                <ul class="menu3">
                    <li><a href="#">21.08. - MMSR SCg</a></li>
                    <li><a href="#">R SCOOechová Potôň SK</a></li>
                    <li><a href="#">SCOOTER Brezová /Visonta/ HU</a></li>
                </ul>
            </li>
            <li>2010</li>
            <li>2011<</li>
        </ul>
    </li>
    <li id="forum"><a href="#" class="prvy"><span>Fórum</span></a></li>
</menu>

现在我想根据菜单中最长的文本自动设置每个第三级菜单(menu3)的宽度。因此，在此示例中，.menu3 的宽度将是文本“SCOOTER Brezová/Visonta/HU”的宽度。

我不能使用css，因为menu2的宽度是稳定的，如果它比menu2长，则设置为menu2的宽度(级联)所以我会使用javascript(jquery)。我有这个代码:

      var i;
    var podm;

    $('menu>li').each(function() {
        podm = 0;
        if($(this).children('ul').size()) {
            $(this).each(function() {

                if($(this).children('ul').size()) {
            $(this).each(function() {

                podm++;
                    i = 60;
$(this).find('li a').each(function() {
    var w = $(this).text();
    $('#js').text(w);
    w = $('#js').width();
    if(w > i) {
        i = w;
    }
});
                $(this).find("ul.menu3").css("width");
                });
            }
            });
        }
    });

但是这段代码运行得很糟糕:-(。

网址:Here

Answer 1

您将 menu3 ul 的宽度设置为 345px，这会导致较长的文本重叠。 Javascript 只是再次设置这个宽度。

<ul class="menu3" style="width: 345px; display: block; opacity: 0.13">

尝试删除宽度规范和 jQuery 代码并检查它是否有效。如果您需要 3 级菜单的特定最小宽度，可以使用 min-width CSS 属性。

编辑:好吧，发现了。问题出在 .menu3 中的 position:relative 属性。 .menu3 的 CSS 应如下所示:

.menu3 {
    display: none;
    position: absolute; /* This changed */
    padding: 0;
    margin: 0;
    list-style: none;
    left: 100px;
    top: 0px; /* This changed */
    background: #464646 url('3menu-po.png') repeat-y;
    display: none;
    white-space: nowrap;
}

注意position:absolute。这会将子菜单从文档流中取出，因此它不受 .menu2 中设置的宽度影响。