我有一个用作常见问题解答的 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解决这个问题?