javascript - 我如何在 html css 和 jquery 上创建一个响应式菜单，一个一个地隐藏 li 元素？

Question

例如这是菜单:

<ul class="main-menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

我需要在调整大小时隐藏 6，在 5 之后，菜单将如下所示:

<ul class="main-menu">
  <li>1
    <ul>
        <li>6</li>
        <li>5</li>
    </ul>
  </li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

Answer 1

您当然可以提高效率。这只是说明解决方案。

您的 HTML:

<ul class="main-menu">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

JS:

$( window ).resize(function() {
    var liWidth = 100;
    if($(window).height()/$('.main-menu').children().length < liWidth){
        console.log('here');
        if($('.main-menu li').first().find('ul').length > 0){
            $('.main-menu li').first().find('ul').append('<li>'+$('.main-menu li').last().html()+'</li>');
            $('.main-menu li').last().remove();
        }
        else{
            $('.main-menu li').first().append('<ul><li>'+$('.main-menu li').last().html()+'</li></ul>');
            $('.main-menu li').last().remove();
        }
    }

    else if($(window).height()/($('.main-menu').children().length + 1) > liWidth){
        console.log('there');
        if($('.main-menu li').first().find('ul li').length === 1 ){
            $('.main-menu').append('<li>' +$('.main-menu li').first().find('ul li').html() + '</li>')
            $('.main-menu li').first().find('ul').remove();
        }
        else if ($('.main-menu li').first().find('ul li').length > 1) {
            $('.main-menu').append('<li>' +$('.main-menu li').first().find('ul li').last().html() + '</li>')
            $('.main-menu li').first().find('ul li').last().remove();
        }
    } 
});

结果:

Fiddle