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>

ナビゲーションの幅が 2 行目に入る場合は、メニューを次のように表示します。

    <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でこれを達成しようとしていますが、立ち往生しています。フィドルを参照してください(フィドルの 2 番目のリストは、私がどのように表示したいかです) リスト項目の幅を数えることができます。しかし、幅が > 300 の場合、li = 300 の後に来るすべての li を、上で示したように、より多くのサブ 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 に答える