用特殊行为使二级UL占100%
Make second level UL take 100% with special behaviour
我正试图使自定义树视图通过我的网站上的不同类别购物。你可以看到我想在小提琴上做什么。我需要第二级UL在不移动行中其他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>
.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;
}
现在的问题是，你的子类别不会显示，因为你已经给了容器一个固定的高度(130px)，而2 divs里面得到所有的高度(每个50%的高度)，所以没有你的子类别的空间。它将被显示(溢出是可见的)，但不会移动下面的元素，因为容器的高度总是130px。
你可以解决这个改变高度为min-height:130px;和高度是一个固定的数量添加height:65px的元素里面。这样，当显示子类别时，容器高度将发生变化:
JSFIDDLE
您可以将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>相关文章：
- 在单独的ul's
- 将所选类别循环到ul>李用加载更多按钮
- 使用jquery动态创建ul-li
- 使用下拉列表筛选列表(ul>li）
- 如何附加<ul><李>元素位于某个特定条件的父元素列表之间
- :not选择器不适用于ul类-备选方案
- 在验证器中添加自定义规则以检查<ul>具有元素
- 在JQuery中隐藏和显示ul中的特定元素
- 使用 jquery 获取外部父 UL
- 隐藏/显示包含单词的ul li项目.但只能入住李的子女
- 如何在点击时显示ul项目
- 限制ul元素中显示的项目
- ul-li专属功能
- 将OnClick函数设置为<ul>，最后一个ul是擦除第一个ul-s
- 我应该如何在 UL 内触发 IMG 标签的点击
- 排序<李><Ul>根据<span>内部<李>
- 在slitify中制作二级项目符号的动画
- jQuery(“ul.sf菜单”）.superfish不是一个函数
- 删除二级UL中的“子菜单”类
- 用特殊行为使二级UL占100%
