0

我想防止我在 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 来实现这一点，但被卡住了。请参阅小提琴（小提琴中的第二个列表是我希望它看起来的样子）我可以计算列表项的宽度。但是我想说如果宽度> 300，则将 li = 300 之后的所有 li 添加到一个 sub ul 中，就像我在上面展示的那样，我希望它看起来像这样。这里的任何帮助将不胜感激。

    <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>
4

1 回答 1

1

尝试这样的事情，小提琴 

    $(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));

         }

    });
于 2013-04-11T07:32:23.647 回答