Question

我有一个div列表，用作常见问题解答。有时div会列在彼此之下，有时它们之间会有文本。如果将它们列在另一个下面，我就会遇到双边框的问题，我不知道如何解决。

请参阅此fiddle。

HTML

<div class="faq">
<div class="faqheader">Toggle 1</div>
  <div class="faqcontent">Content 1</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 2</div>
  <div class="faqcontent">Content 2</div>
</div>

<p>Some text...</p>

<div class="faq">
<div class="faqheader">Toggle 3</div>
  <div class="faqcontent">Content 3</div>
</div>

<div class="faq">
<div class="faqheader">Toggle 4</div>
  <div class="faqcontent">Content 4</div>
</div>

CSS

.faq {width:200px;border: 1px solid #ddd;}
.faqheader {height:20px;font-weight: bold;cursor: pointer;}
.faqcontent {display:none;height:50px;}

div需要有边框：border:1px solid #ddd

当div之间有文本（切换1和2）时，边框看起来很好，但是当它们靠近在一起时（切换3和4），它看起来不是很好。

此时不能更改标记。它们是动态生成的。有没有办法用css或jquery解决这个问题？

Answer 1

将此规则添加到 CSS

.faq + .faq
{
    border-top: none;
}

说明： .faq直接来自另一个.faq之后没有获得顶部边框。

这是一个纯CSS解决方案（没有脚本）
它不假设关于布局（div不必是容器的最后一个孩子，或某个特定索引）
它修复了双边框问题，即使它们之后是多个.faq。
是一个跨浏览器解决方案。

请参阅此Working Fiddle

Answer 2

您确定可以使用jQuery执行此操作：

$('.faq').each(function(){
    if($(this).next('.faq').length > 0){
        $(this).css({borderBottom:0});   
    }
});

JSFiddle

对于每个.faq，如果还有其他.faq，请删除此底部边框。

Answer 3

也许只需添加margin-top：5px; （或更少）.faq：

.faq {width:200px;border: 1px solid #ddd;margin-top:5px;}

http://jsfiddle.net/Wm7q7/

Answer 4

.faq:nth-child(3) {
    border-bottom:none;
}

更多信息here

Answer 5

你能不能简单地使用负边际？

.faq {width:200px;border: 1px solid #ddd;margin-top:-1px;}

http://jsfiddle.net/bYPR6/7/

如何避免div列表上的双重边框

5 个答案: