边界底部的问题在ul浮动左列表,与开框功能
border bottom issue on a ul float left list, with open box feature
我以前问过一个问题:
谢谢你的回答,但是,当我添加"打开框功能"时,边框底部有问题。
下面是代码:$('li').click(function() {
if (!$('div.' + $(this).index()).length) {
for (a = $('li').length - 1; a >= 0; a--) {
if ($('li').eq(a).offset().top == $(this).offset().top) {
$('li').eq(a).after('<div class="' + $(this).index() + '">' + $(this).html() + '</div>');
$('div:not(.' + $(this).index() + ')').remove();
break;
/*$('div.' + $(this).index()).slideDown(200);
$('div:not(.' + $(this).index() + ')').slideUp(200, function() {
$(this).remove();
});*/
}
}
} else {
$('div.' + $(this).index()).slideUp(200, function() {
$(this).remove();
});
}
})
ul {
display: block;
width: 100%;
margin: 0;
padding: 0
}
li {
display: block;
width: 33%;
height: 120px;
float: left;
margin: 0;
padding: 0;
border-bottom: #ccc 1px solid;
box-sizing: border-box;
background: #fee;
}
ul:after {
content: '';
display: block;
clear: both;
}
/*li.no-border {
border-bottom: 0px;
}*/
li:nth-last-child(4) ~ li:nth-child(3n+1),
li:nth-last-child(4) ~ li:nth-child(3n+1) ~ li{
border-bottom: 0px;
}
div {
background: #ccc;
height: 150px;
width: 100%;
clear: both;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
请帮助。谢谢。
也许你可以画一个border-top(或shadow),并通过负边距(or position:relative or translate() )
和overflow隐藏第一行。
ul {
overflow:hidden;
}
li {
margin:-1px 0 0;
box-shadow:0 -1px #ccc;
}
下面的演示
$('li').click(function() {
if (!$('div.' + $(this).index()).length) {
for (a = $('li').length - 1; a >= 0; a--) {
if ($('li').eq(a).offset().top == $(this).offset().top) {
$('li').eq(a).after('<div class="' + $(this).index() + '">' + $(this).html() + '</div>');
$('div:not(.' + $(this).index() + ')').remove();
break;
/*$('div.' + $(this).index()).slideDown(200);
$('div:not(.' + $(this).index() + ')').slideUp(200, function() {
$(this).remove();
});*/
}
}
} else {
$('div.' + $(this).index()).slideUp(200, function() {
$(this).remove();
});
}
})
ul {
display: block;
width: 100%;
margin: 0;
padding: 0;
overflow:hidden;
}
li {
display: block;
width: 33%;
height: 120px;
float: left;
padding: 0;
margin:-1px 0 0px;
box-shadow:0 -1px #ccc;
box-sizing: border-box;
background: #fee;
}
ul:after {
content: '';
display: block;
clear: both;
}
div {
background: #def;
height: 150px;
width: 100%;
clear: both;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
相关文章:
- 简化了点击功能的长列表
- 如何创建一个脚本,该脚本给定网站列表,它使用其搜索功能来获取信息
- 好友列表功能
- 谷歌类功能的猜测列表
- 更改选择选项下拉列表与onclick功能按钮
- 在选择某些项目时显示文本和列表的功能
- 如何在输入下从数据列表中选择一个选项后立即触发功能
- 如何在WinJS中为列表视图创建排序功能
- 如何在Spring MVC中实现无序列表的展开/折叠功能
- Javascript - 更快的功能:线性列表搜索或获取对象值
- 项目点击和收听事件功能 煎茶触摸 2 列表
- Google Place 自动完成功能会在下拉列表中的结果(预测)中显示“street_number”,但不会在 .ge
- 我的播放器播放列表删除功能不起作用
- “功能上”生成一个仅包含几个元素的列表
- 以角度添加到列表功能
- 在引导程序 3 按钮下拉列表中添加滑动功能时出现问题
- 使用Pusher/Pubnub创建好友列表功能
- 如何使用windows phone 8 c#中的jQuery列表功能
- 移动列表功能无法正常工作
- 我怎样才能得到一个按"减少"的降序排序的映射/减少结果;值";价值如果也使用列表功能可以实