將UL設置為移動設備上的下拉菜單和台式機上的全角

Question

背景

我們具有以下代碼，以使水平<ul>占據桌面上<div class="list__wrapper">元素的完整寬度（ min-width: 1024px ），但顯示為移動斷點的下拉列表（ max-width: 1024px ）。

碼

• 鏈接到Codepen

問題

1. 使所有<li>元素占據全角（當前在desktop和mobile上還留有一些空間）。
2. 隨着<div class="list__wrapper">擴展， <li>會占用整個可用空間。 目前，即使更改.list__wrapper類的max-width: 50% ，也不會更改。

電流輸出

1. desktop

2. mobile (not expanded)

3. mobile (expanded)

所需的輸出

1. desktop

2. mobile (not expanded)

3. mobile (expanded)

碼：

 var wind = $(window); var windowWidth = $(window).width(); wind.on('resize load', function() { if (windowWidth < 1024) { $("ul").on("click", ".init", function() { $(this).parent().children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); } }); 

 .list__wrapper { max-width: 50%; background-color: grey; } li { list-style-type: none; background-color: black; color: white; } @media screen and (max-width: 1024px) { ul { border: 1px #000 solid; text-align: center; width: 100%; } li { width: 100%; } li.init { cursor: pointer; } } @media screen and (min-width: 1024px) { .list { display: flex; justify-content: center; flex: 1; align-items: center; } .list li { padding: 10px; color: white; width: 25%; text-align: center; border-left: 1px solid white; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="list__wrapper"> <ul class="list"> <li class="init">Option 0</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2</li> <li data-value="value 3">Option 3</li> </ul> </div> 

Answer 1

1.使所有<li>元素占據全寬（當前在台式機和移動設備上還留有一些空間）。

@media screen and (max-width: 1024px) {
  ul { 
    border: 1px #000 solid;
    text-align: center;
    width: 100vw; // vertical width of screen
  }
  li {
    width: 100%; 
  }
  li.init { 
    cursor: pointer; 
  }
}

2.隨着<div class="list__wrapper">展開，然后<li>占據整個可用空間。 目前，即使更改.list__wrapper類的最大寬度：50％，也不會更改。

    @media screen and (min-width: 1024px) {
      .list {
        display: flex;
        justify-content: center;
        flex: 1;
        align-items: center;

      }
      .list li {
        padding: 10px;
        color: white;
        flex:0 0 25%; // use flex sizing for flexboxes
        //flex:grow(1/0) shrink(1/0) width;
        text-align: center;
        border-left: 1px solid white;
      }
    }

Answer 2

ul具有默認的邊距和填充值。 我重置值並刪除max-width 。

 var wind = $(window); var windowWidth = $(window).width(); wind.on('resize load', function() { if (windowWidth < 1024) { $("ul").on("click", ".init", function() { $(this).parent().children('li:not(.init)').toggle(); }); var allOptions = $("ul").children('li:not(.init)'); $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); } }); 

 .list__wrapper { background-color: grey; } ul { padding:0; margin:0; } li { list-style-type: none; background-color: black; color: white; } @media screen and (max-width: 1024px) { .list__wrapper { background-color: grey; } ul { border: 1px #000 solid; text-align: center; width: 100%; padding:0; margin:0; } li { width: 100%; } li.init { cursor: pointer; } } @media screen and (min-width: 1024px) { .list { display: flex; justify-content: center; flex: 1; align-items: center; } .list li { padding: 10px; color: white; width: 25%; text-align: center; border-left: 1px solid white; } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <div class="list__wrapper"> <ul class="list"> <li class="init">Option 0</li> <li data-value="value 1">Option 1</li> <li data-value="value 2">Option 2</li> <li data-value="value 3">Option 3</li> </ul> </div>