Question

我有一个菜单列表可以有超过7个菜单。但我想在菜单栏中显示7，并在菜单右侧显示的切换按钮下显示额外菜单。我不想通过添加最后一个菜单的孩子来做到这一点。

Answer 1

很难说没有看到你的代码和你尝试过的东西，但这样的事情应该让你开始：

编辑：更新了代码

function toggleMenus($) {
    var $menu = $('#menu'),
        $lastItem = $menu.find('li:eq(4)'), // how many to display, from 0.
        $targets = $menu.find('li:gt(' + $lastItem.index() + ')'), //get the rest
        $toggler = $('<li class="toggler"><span>More Menu Items +</span></li>'),
        $targetBox = $('<div id="more-menu"></div>');

    $targets.appendTo($targetBox); // fill the overflow box.
    $lastItem.addClass('moremenu');     

    // Insert the toggler at the last position    
    $toggler.insertAfter($lastItem)
        .on('click', 'span', function () { // toggle the overflow box on click
        $targetBox.toggleClass('active');
    })
        .css('position', 'relative') // for absolute positioning of the target box
    .append($targetBox); // attach the overflow box


}

jQuery(document).ready(function ($) {
    toggleMenus($);
});

http://jsfiddle.net/willthemoor/bB2rv/3/

仅显示列表中的几个菜单和导航图标下的最后一个菜单

1 个答案: