Javascript 通过特殊行为使二级UL达到100%

我正在尝试做一个自定义的树视图，以通过我的网站上的不同类别的商店。你可以看到我想做什么。我需要第二级UL占用当前选定li行下的所有空间，而不移动该行的其他li

这是我的密码

HTML:

Javascript

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

});

编辑 这是我尝试做的一个模型

---

关于您可以在

ul

元素中添加

float:left

，还可以添加一些

边距底部

以正确显示它们：

$（“.CategoryButton”）。单击（函数（）{
var Container=$（this.find（“.TreeContainer”）[0]；
if（$（容器）.hasClass（“切换”））{
$（容器）.removeClass（“切换”）；
}否则{
$（容器）.addClass（“切换”）；
}
});
.CategoriesContainer{
宽度：90%；
显示：块；
列表样式：无；
}
.类别按钮{
高度：130像素；
宽度：130px；
显示：内联块；
左边距：5px；
边缘顶部：5px；
背景颜色：浅灰色；
文本对齐：居中；
光标：指针；
列表样式类型：无；
页边距底部：40px；/*添加页边距底部*/
}
.助手{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.上半身{
显示：块；
身高：50%；
宽度：100%；
}
洛厄尔夫先生{
显示：块；
身高：50%；
宽度：100%；
}
.类别图像{
高度：40px；
宽度：40px；
垂直对齐：中间对齐；
}
.CategoryText{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
树形容器{
宽度：100%；
显示：无；
}
.切换{
左：0；
排名：0；
填充：0；
保证金：0；
空白：nowrap；
显示：块；
背景颜色：绿色；
浮动：左；/*向左添加浮动*/
}



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋


您可以在
ul
元素中添加
float:left
，还可以添加一些
边距底部
以正确显示它们：


$（“.CategoryButton”）。单击（函数（）{
var Container=$（this.find（“.TreeContainer”）[0]；
if（$（容器）.hasClass（“切换”））{
$（容器）.removeClass（“切换”）；
}否则{
$（容器）.addClass（“切换”）；
}
});
.CategoriesContainer{
宽度：90%；
显示：块；
列表样式：无；
}
.类别按钮{
高度：130像素；
宽度：130px；
显示：内联块；
左边距：5px；
边缘顶部：5px；
背景颜色：浅灰色；
文本对齐：居中；
光标：指针；
列表样式类型：无；
页边距底部：40px；/*添加页边距底部*/
}
.助手{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
.上半身{
显示：块；
身高：50%；
宽度：100%；
}
洛厄尔夫先生{
显示：块；
身高：50%；
宽度：100%；
}
.类别图像{
高度：40px；
宽度：40px；
垂直对齐：中间对齐；
}
.CategoryText{
显示：内联块；
身高：100%；
垂直对齐：中间对齐；
}
树形容器{
宽度：100%；
显示：无；
}
.切换{
左：0；
排名：0；
填充：0；
保证金：0；
空白：nowrap；
显示：块；
背景颜色：绿色；
浮动：左；/*向左添加浮动*/
}



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋



鞋

男鞋
女鞋

.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;
}

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

});

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