Установите UL как раскрывающийся список на мобильном устройстве и полную ширину на рабочем столе

Question

Фон

У нас есть следующий код для горизонтального <ul>, который мы хотим занять на всю ширину элемента <div class="list__wrapper"> на рабочем столе (min-width: 1024px), но отображается как раскрывающийся список для мобильной точки останова (max-width: 1024px).

Код

• Ссылка на codepen

Проблемы

1. Заставить все элементы <li> занять полную ширину (в настоящее время на desktop и mobile осталось место).
2. По мере расширения <div class="list__wrapper">, <li> занимает все доступное пространство.В настоящее время это даже не меняет max-width: 50% на .list__wrapper класс.

Токовый выход

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

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>

Answer 2

1.Make все элементы <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> занять все свободное местоВ настоящее время это даже не меняет max-width: 50% для класса .list__wrapper.

    @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;
      }
    }