jquery - 如何避免 div 列表上出现双边框

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:1pxsolid #ddd

当 div 之间有文本(切换 1 和 2)时，边框看起来很好，但当它们靠得很近时(切换 3 和 4)，它看起来不太好。

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

Answer 1

将此规则添加到您的 CSS

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

说明: 直接位于另一个 .faq 之后的 .faq 没有顶部边框。

1. 这是一个纯 CSS 解决方案(无脚本)
2. 它不对布局做出任何假设(div 不必是容器的最后一个子级，或者位于某个特定索引处)
3. 它修复了双边框问题，即使它们是一个接一个的多个.faq。
4. 它是一个跨浏览器解决方案。

查看此Working Fiddle