Question

在我的页面上，我有一个目前有六个链接的菜单。其中两个打开一个子菜单（li-tag中的ul-tag）。使用jQuery，我试图计算链接数（6），然后给每个链接宽度为页面的1/6。使用此代码，我可以实现我的目标，但只能使用普通链接（没有子菜单）：

    $( document ).ready(function()
    {
       // Gets the number of elements with class yourClass
       var amount = $('.menulink').length;
       alert(amount) //EDIT: This outputs "6"
       // Calculates the width each element should get
       var width = 100/amount;
       width += "%";
       // Set the width on each element
       $( "nav ul li " ).css('width', width);   
    });

我的HTML看起来像这样：

<nav>
        <ul>
            <li class="menulink"><a href="#">Link1 (with submenu)</a>
            <ul>
            <li><a href="#">Submenuitem1</a></li>
            <li><a href="#">Submenuitem2</a></li>
            <li><a href="#">Submenuitem3</a></li>
            <li><a href="#">Submenuitem4</a></li>
            </ul>
        </li>
        <li class="menulink"><a href="#">Link2</a></li>
        <li class="menulink"><a href="#">Link3</a></li>
        <li class="menulink"><a href="#">Link4</a></li>
        <li class="menulink"><a href="#">Libk5</a></li>
        <li class="menulink"><a href="#">Link6 (with submenu)</a>
            <ul>
            <li><a href="#">Submenuitem1</a></li>
            <li><a href="#">Submenuitem2</a></li>
            <li><a href="#">Submenuitem3</a></li>
            </ul>
        </li>
        </ul>
    </nav>

我知道这不是必需的，我可以用6个menulinks将宽度设置为16.7％，但我想理解为什么我的代码不起作用。任何人都可以解释为什么不呢？

编辑：我的CSS看起来是这样的：

body
        {
            padding: 0;
            margin: 0;
            overflow-y: scroll;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
        }

    nav
        {
            background-color:#222;
        }

    nav ul
    {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
    }

    nav ul li
    {
    display:inline-block;
    }

    nav ul li:hover
    {
    background-color: #333;
    }

    nav ul li a
    {
        color: #CCC;
    display: block;
    padding: 15px;
    text-decoration:none;
    }

    nav ul li a:hover
    {
    color: #CCC;
    text-decoration:none;
    }    


    nav ul ul
    {
    display:none;
    position:absolute;
    background-color: #333;
    border: 5px solid #222;
    border-top: 0;
    margin-left: -5px;
    width: 300px;
    }

    nav ul ul li
    {
    display:block;
    width: 300px;
    }

Answer 1

根据您在评论中所说的内容，它没有将宽度应用于具有子菜单的项目。

试试这个：

$( document ).ready(function() {
    // Gets the number of elements with class yourClass
    var amount = $('.menulink').length;

    // Calculates the width each element should get
    var width = 100/amount;
    width += "%";

    // Set the width on each element
    $("nav > ul > li").css('width', width);
});

jQuery css-editing方法不适用于带有ul的nav ul li

1 个答案: