如何在html css和jquery上创建一个响应式菜单，逐个隐藏li元素

How can i create a responsive menu on html css and jquery,that hide li element one by one?

本文关键字：响应 一个 菜单 元素 li 隐藏 css html jquery 创建      更新时间：2023-09-26

例如:

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

你当然可以让它更有效率。这就是解的图解。

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

结果:

小提琴

如果我明白你的意思，我将这样做。我将建立我的html与子菜单和隐藏它与css。并使用resize()来隐藏或取消隐藏元素。

是的，你只需要CSS和媒体查询(如你所愿)

  <ul class="main-menu">
    <li>1
      <ul id="nav2">
       <li>6</li>
       <li>5</li>
     </ul>
    </li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li id="five" >5</li>
    <li id="six" >6</li>
 </ul>
CSS

#nav2 li {
   display:none;
}
@media only screen and (min-width : 150px) and (max-width : 580px)
 {
#nav2 li {
    display:block;
}
#five,#six {
    display:none;
}
}
相关文章：