html - CSS定位嵌套ul和显示flex问题

Question

我正在尝试创建一个垂直显示和隐藏按钮菜单。

我试图实现这一点，当单击“城市”方块时，带有类的 ulnested-ul将按应有的方式显示。但问题是我不能真正将 li 与 ul 中的类一起定位nested-li，.parent所以nested-li会自动换行。我试过flex-wrap:wrap了，那只会使nested-li直线下降。max-width我希望它像正常一样垂直显示，如果它达到父宽度 的，则自动换行到下一行。

$('.radio').on('click', function() {
  $('.radio').each(function() {
    if ($(this).is(':checked')) {
      $('.nested-ul').show();
    } else {
      $('.nested-ul').hide();
    }
  });
});

ul {
  list-style: none;
}

li {
  width: 100%;
}

.parent {
  width: 450px;
  height: 400px;
  background-color: #c8c8c8;
}

.child {
  width: 45%;
  height: 100%;
  margin-right: 15px;
  float: left;
}

label {
  width: 100%;
  min-height: 100px;
  background-color: #f8f8f8;
  float: left;
  transition: 0.5s ease;
  text-align: center;
}

label p {
  margin-top: 35px;
}

.radio {
  display: none;
  transition: 0.5s ease;
}

.nested-ul {
  transition: 0.5s ease;
  position: relative;
  left: 0;
  top: 15px;
  max-height: inherit;
  display: flex;
  left: calc(-100% - 55px);
}

.nested-li {
  min-width: 120px;
  margin-right: 15px;
}

.radio:checked+label,
label:hover {
  cursor: pointer;
  background-color: #ff0088;
}

.radio:checked+label>p,
label:hover>p {
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="child">
    <input type="radio" id="colors" class="radio" name="radio">
    <label for="colors">
      <p>Colors</p>
    </label></li>
  <li class="child">
    <input type="radio" id="cities" class="radio" name="radio">
    <label for="cities">
      <p>Cities</p>
    </label>
    <ul class="nested-ul" style="display:none">
      <li class="nested-li">
        <label for="">
          <p>New York</p>
        </label></li>
      <li class="nested-li">
        <label for="">
          <p>Calfornia</p>
        </label></li>
      <li class="nested-li">
        <label for="">
          <p>Beijing</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Shanghai</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Tokyo</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Copenhagen</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Berlin</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>London</p>
        </label>
      </li>
    </ul>
  </li>
</ul>

有人有解决方案吗？

标签： htmlcss

Answer 1

$('.radio').on('click', function() {
  $('.radio').each(function() {
    if ($(this).is(':checked')) {
      $('.nested-ul').show();
    } else {
      $('.nested-ul').hide();
    }
  });
});

ul {
  list-style: none;
}

li {
  width: 100%;
}

.parent {
  width: 450px;
  height: 400px;
  background-color: #c8c8c8;
  position:relative;
}

.child {
  width: 45%;
  height: 100%;
  margin-right: 15px;
  float: left;
}

label {
  width: 100%;
  min-height: 100px;
  background-color: #f8f8f8;
  float: left;
  transition: 0.5s ease;
  text-align: center;
}

label p {
  margin-top: 35px;
}

.radio {
  display: none;
  transition: 0.5s ease;
}

.nested-ul {
  transition: 0.5s ease;
  position: absolute;
  left: 0;
  right: 0;
  top: 130px;
  max-height: inherit;
  display: flex;
  flex-wrap: wrap;
}

.nested-li {
  min-width: 120px;
  margin-right: 15px;
  width:auto;
}

.radio:checked+label,
label:hover {
  cursor: pointer;
  background-color: #ff0088;
}

.radio:checked+label>p,
label:hover>p {
  color: #ffffff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="parent">
  <li class="child">
    <input type="radio" id="colors" class="radio" name="radio">
    <label for="colors">
      <p>Colors</p>
    </label></li>
  <li class="child">
    <input type="radio" id="cities" class="radio" name="radio">
    <label for="cities">
      <p>Cities</p>
    </label>
    <ul class="nested-ul" style="display:none">
      <li class="nested-li">
        <label for="">
          <p>New York</p>
        </label></li>
      <li class="nested-li">
        <label for="">
          <p>Calfornia</p>
        </label></li>
      <li class="nested-li">
        <label for="">
          <p>Beijing</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Shanghai</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Tokyo</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Copenhagen</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>Berlin</p>
        </label>
      </li>
      <li class="nested-li">
        <label for="">
          <p>London</p>
        </label>
      </li>
    </ul>
  </li>
</ul>