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

Задний план

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

Код

Ссылка на кодовый ключ

Проблемы

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

Текущий выход

desktop
mobile (not expanded)
mobile (expanded)

Желаемый результат

desktop
mobile (not expanded)
mobile (expanded)

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

Код:

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>

jquery html css html-lists

07.12.2018 18:44

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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> занимает все доступное пространство. В настоящее время он не меняет 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;
      }
    }

07.12.2018 19:02

Ответ принят как подходящий

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>

это помогло решить мою проблему с минимальными изменениями в структуре html :-)

— 07.12.2018 19:53

07.12.2018 19:10