Question

我有html代码

<div id="menu">
<ul class="menu">
            <li><a href="#" class="parent"><span>Product Info</span></a>
        <div class="columns two">
            <ul class="one">
                <li><a href="#"><span>Sub Item 1.1</span></a></li>
                <li><a href="#"><span>Sub Item 1.2</span></a></li>
                <li><a href="#"><span>Sub Item 1.3</span></a></li>
                <li><a href="#"><span>Sub Item 1.4</span></a></li>
                <li><a href="#"><span>Sub Item 1.5</span></a></li>
                <li><a href="#"><span>Sub Item 1.6</span></a></li>
                <li><a href="#"><span>Sub Item 1.7</span></a></li>
                <li><a href="#"><span>Sub Item 2.1</span></a></li>
                <li><a href="#"><span>Sub Item 2.2</span></a></li>
                <li><a href="#"><span>Sub Item 2.3</span></a></li>
                <li><a href="#"><span>Sub Item 2.4</span></a></li>
                <li><a href="#"><span>Sub Item 2.5</span></a></li>
                <li><a href="#"><span>Sub Item 2.6</span></a></li>
            </ul>
        </div>
    </li>
</ul>

在这种情况下，所有子菜单将一个在另一个下面显示。我想要jquery代码，以便我可以对齐子菜单，使得如果子菜单项超过3，它将与右边对齐。例如，如果我有6个子菜单，前3个应该在第一个列，下一列中的下一个3，依此类推..请帮我解释一下代码

Answer 1

在巡视jquery中包含以下代码行以获取所需的输出

if($('.one').children().length>3){
    $('.one li').css('float','left');
    $('.one li:nth-child(3n+1)').css('clear','both');
}

Answer 2

试试此代码

 if($('.one').children().length>3){
 $('.one li').css('float','left');
 $('.one li:nth-child(3n+1)').css('clear','both');
 }

在加载函数中，

    $(window).load(function () {
   // Your function....
    });

或

    $(document).load(function () {
   // Your function....
    });

使用jquery将子菜单对齐到右侧

2 个答案: