2

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

看到这个小提琴。

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解决这个问题？

4

5 回答 5

10

将此规则添加到您的CSS

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

解释： .faq紧接在另一个.faq没有得到顶部边框之后。

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

看到这个工作小提琴

于 2013-09-11T07:44:26.340 回答
2

你当然可以使用 jQuery 来做到这一点：

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

JSFiddle

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

于 2013-09-11T07:27:45.693 回答
0

你不能简单地使用负边距吗？

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

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

于 2013-09-11T07:46:43.170 回答
0

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

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

http://jsfiddle.net/Wm7q7/

于 2013-09-11T07:28:24.340 回答
0 
.faq:nth-child(3) {
    border-bottom:none;
}

更多信息在这里

于 2013-09-11T07:28:55.327 回答