将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

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

@IBAction func ad_button_click(_ sender: Any) { if GADRewardBasedVideoAd.sharedInstance().isReady == true { GADRewardBasedVideoAd.sharedInstance().present(fromRootViewController: self) } } 具有默认的边距和填充值。我重置值并删除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;
  }
}