使二级 UL 以特殊行为取 100%

Question

我正在尝试制作一个自定义树视图，以便在我的网站上通过不同的类别购物。你可以看到我想做什么here on fiddle。我需要二级 UL 来获取所选 li 的当前行下的所有 space，而不使该行的其他 li 移动。

这是我的代码

HTML:

<ul Class="CategoriesContainer">
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>
<li Class="CategoryButton">
    <div class="UpperHalf">
        <span class="helper"></span>
        <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png"/>
    </div>    
    <div class="LowerHalf">

        <span class="CategoryText">Shoes</span>
    </div>  
    <ul Class="TreeContainer">
        <li>Man shoes</li>
        <li>Woman shoes</li>
    </ul>
</li>

CSS:

.CategoriesContainer{
width:90%;
display:Block;
list-style:none;
}
.CategoryButton{
    height:130px;
    width:130px;
    display:inline-block;
    margin-left:5px;
    margin-top:5px;
    background-color:lightgray;
     text-align:center;
    cursor:pointer;
    list-style-type:none;
}
.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.UpperHalf {
    display:block;
    height:50%;
    width:100%;
}
.LowerHalf {
    display:block;
    height:50%;
    width:100%;
}
.CategoryImage
{
   height:40px;
   width:40px;
    vertical-align:middle;
}
.CategoryText {
    display: inline-block;
    height: 100%;
    vertical-align: middle;

}
.TreeContainer {
    width:100%;
    display:none;

}
.Toggled
{
   left:0;
   top:0;
   padding:0; 
   margin:0; 
   white-space:nowrap;
   display:block;
   background-color:green;
}

Javascript

$(".CategoryButton").click(function () {
var Container = $(this).find(".TreeContainer")[0];
if ($(Container).hasClass("Toggled"))
{
    $(Container).removeClass("Toggled");
}   
else
{
    $(Container).addClass("Toggled");
}

});

编辑 There 是我正在尝试做的模型。

此致

Answer 1

您可以将 float: left 添加到 ul 元素，并添加一些 margin-bottom 以正确显示它们：

$(".CategoryButton").click(function() {
  var Container = $(this).find(".TreeContainer")[0];
  if ($(Container).hasClass("Toggled")) {
    $(Container).removeClass("Toggled");
  } else {
    $(Container).addClass("Toggled");
  }

});

.CategoriesContainer {
  width: 90%;
  display: Block;
  list-style: none;
}
.CategoryButton {
  height: 130px;
  width: 130px;
  display: inline-block;
  margin-left: 5px;
  margin-top: 5px;
  background-color: lightgray;
  text-align: center;
  cursor: pointer;
  list-style-type: none;
  margin-bottom: 40px;/*add margin-bottom*/
}
.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.UpperHalf {
  display: block;
  height: 50%;
  width: 100%;
}
.LowerHalf {
  display: block;
  height: 50%;
  width: 100%;
}
.CategoryImage {
  height: 40px;
  width: 40px;
  vertical-align: middle;
}
.CategoryText {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.TreeContainer {
  width: 100%;
  display: none;
}
.Toggled {
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  white-space: nowrap;
  display: block;
  background-color: green;
  float: left;/*add float left*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul Class="CategoriesContainer">
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
  <li Class="CategoryButton">
    <div class="UpperHalf">
      <span class="helper"></span>
      <img class="CategoryImage" src="http://cdn.1001freedownloads.com/icon/thumb/390973/shoes-icon.png" />
    </div>
    <div class="LowerHalf">

      <span class="CategoryText">Shoes</span>
    </div>
    <ul Class="TreeContainer">
      <li>Man shoes</li>
      <li>Woman shoes</li>
    </ul>
  </li>
</ul>

Answer 2

你可以让容器在同一行不向下移动添加：

.CategoryButton{
    min-height: 130px;  
    vertical-align:top;
}

现在的问题是你的子类别不会显示，因为你给容器一个固定的高度（130px），而里面的 2 divs 获得了所有的高度（每个容器 50% 高度） )，因此您的子类别没有空间。它将显示（溢出可见）但不会移动下方的元素，因为容器的高度始终为 130 像素。

您可以修复此问题，将高度更改为 min-height:130px;，并且由于高度是固定的，因此将 height:65px 添加到内部元素。这样子类别显示时容器高度会改变：

JSFIDDLE

使二级 UL 以特殊行为取 100%

Make second level UL take 100% with special behaviour

html

javascript

css

jquery

html-lists