javascript - 使第二级UL具有特殊行为的100％

我正在尝试制作自定义树形视图，以在我的网站上购物各种类别的商品。您可以看到我想做的here on fiddle。我需要第二级UL占用所选li当前行下的所有空间，而不移动该行的其他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;
}

Java脚本

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

});

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

问候

最佳答案

您可以使容器在不向下移动的同一行中添加：

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

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

您可以将高度更改为min-height:130px;并将其固定为固定高度，因为高度是固定值，因此请将height:65px添加到内部元素中。这样，当显示子类别时，容器的高度将发生变化：

JSFIDDLE