代码之家 › 专栏 › 技术社区 › usernameabc

在移动设备上将ul设置为下拉菜单,在桌面上将ul设置为全宽

html-lists css html jquery

usernameabc · 技术社区 · 6 年前

背景

我们有下面的代码 <ul> 我们要占据 <div class="list__wrapper"> 桌面上的元素( min-width: 1024px ,但显示为移动断点的下拉列表( max-width: 1024px )

代码

链接到 codepen

问题

使一切 <li> 元素占用整个宽度(当前还有一些空间 desktop 和 mobile )
作为 <DIV class=“列表包装”> 展开,然后 <理工大学; 占用整个可用空间。目前,即使改变 max-width: 50% 上 .list__wrapper 班级。

电流输出

桌面

mobile (not expanded)

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>

2 回复 | 直到 6 年前

doğukan 6 年前

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>

LAMG 6 年前

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"> 展开,然后 <理工大学; 占用整个可用空间。目前,即使更改.list_uu wrapper类上的max width: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;
      }
    }