Question

我想阻止我的用户使用cms使他们的菜单项超过多行，因为它看起来不太好并且可以切断他们的内容。到目前为止，我有这个。

    <div id="sitewrap">
        <div id="wrap">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a>
                <ul> 
                <li><a href="#">Sub contact</a></li>
                </ul>
                </li>
                <li><a href="#">Register</a></li>
                <li><a href="#">Info</a></li>
                <li><a href="#">Share</a></li>
                <li><a href="#">Extra Info</a></li>
                <li><a href="#">Extra Info</a></li>
            </ul>
        </div>
    </div>

如果导航的宽度进入第二行，我希望菜单看起来像这样。

    <div id="wrap">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Register</a></li>
            <li>
                <a href="#">More</a>
                <ul>
                <li><a href="#">Share</a></li>
                <li><a href="#">Extra Info</a></li>
                <li><a href="#">Extra Info</a></li>
                </ul>
            </li>
        </ul>
    </div>

我试图用Jquery来实现这个目标，但我被卡住了。 See Fiddle（小提琴中的第二个列表是我希望它看起来如何）我可以计算列表项的宽度。但我想说宽度是否> 300将li = 300之后的所有li添加到我上面显示的更像我想要的样子。这里的任何帮助将不胜感激。

    <script>
    $(document).ready(function() {
     var listWidth = [];
    $('#wrap ul li').each(function() {
        listWidth.push($(this).width());
    });

    var total = 0;
    for (var i = 0; i < listWidth.length; i++) {
        total += parseInt(listWidth[i]);
    }
        if (total > 300) 
        {
        alert ('to big');    
        }

        else {
         alert ('nice');    
        }    
    });

    </script>

Answer 1

尝试这样的事情，FIDDLE

    $(document).ready(function() {
        var listWidth = [];
        var total = 0;
         // new li to append
        var li = $('<li><a>more</a></li>')
         // new ul to be appended to ul
        var ul = $('<ul>')

        // variable to store index of element after which new li(more) will be added
        var $index = true;

        // variable to state that index vaiable is set, no more index need to be set 
        var $value_set = true;
        $('#wrap ul li').each(function() {
            total += parseInt($(this).width());
            if (total > 300){
                if($value_set){
                    $index = $(this).index() - 2;
                    $value_set = false; 
                }
            }

        });
        $( "#wrap ul li:gt("+$index +")").each(function() {
            ul.append(this);
        });

        if(ul.length){
             $('#wrap ul').append(li.append(ul));

         }

    });

Jquery阻止html列表遍历多行

1 个答案: