jquery - 2列；多 Accordion 面板

Question

好的，我遇到了一些问题，我认为这是一个 CSS 问题。 这是我目前正在做的事情:http://www.notedls.com/demo/

关注新闻 Accordion 菜单。 这里的想法是有一个小图像(50x50 带填充)，然后在它旁边有一个巨大的标题。当用户单击标题时，它会扩展到文章。如果用户想阅读评论或自己发表评论，他们可以单击“查看评论”以进一步展开它。

我遇到的问题(如果不清楚的话)是图像和文本的间距。我可以简单地增加 ui.accordion-acc 或 -left 的高度以使一切都合适，但这并不能解决问题。如果您在单击标题 1 的第一个扩展时注意到，它将在图像下方包裹查看评论。这是我不想要的，我试过将这些元素分成额外的 div 甚至 float ，但它就是不起作用。从本质上讲，无论文章和评论可能占据该领域多长时间，我都希望图像下方有无限的空白。

Answer 1

尝试添加这个 CSS:

ul#acc1 .acc1 { padding-left: 50px; } /* headline */
ul#acc1 > li > div { padding-left: 55px; } /* text block under headline */
ul#acc1 ul li { padding-left: 0; width: 487px; } /* View Comments */
ul#acc1 ul li div { padding-left: 20px; } /* text here under view comments */

我不得不减少 View 评论的 block 大小，因为它向右推出。调整 50px、55px、487px(设置宽度为 542px 减去 55px)和 20px(只是将评论缩进一点)以匹配缩略图大小。

---

问题是 Accordion 中有 Accordion ，所以当您添加通用 Accordion CSS 类时，如 ul.ui-accordion-container li a.ui-accordion-link它影响两个级别。这就是评论向下移动 62px 的原因。

您已经有了可以使用的更具体的类...试试这个 ul.ui-accordion-container li a.acc1但我不建议为链接添加高度，而是将其添加到 <h1>以匹配缩略图高度。所以试试这个:

h1 {
 float: left;
 margin: 0px;
 padding: 1px;
 font-size: 30px;
 color: #9667cc;
 height: 65px;
}
ul.ui-accordion-container li a.acc1 { 
 display: block; 
 padding-left: 5px; 
 margin-right: 3px; 
 height: 62px;
 color: #000; 
 text-decoration: none; 
 line-height: 28px; 
}
ul.ui-accordion-container li a.acc2 { 
 line-height: 28px; 
}