我在 dl 中有一个包含大量内容的页面,可通过 JQuery 展开/折叠
我想要完成的是在另一个页面上有一个链接,可以将用户带到 dl 中的特定部分。
我尝试使用常规页面锚点,但它们不会扩展列表。
<dl class="faq">
<dt style="text-indent:20px; font-size: 12px; font-weight: normal; padding-top: 0px; background: none;"><u>TITLE</u></dt>
<dd>
<p>
content
</p>
</dd>
</dl>
CSS:
.faq { clear: both; padding-top: 5px; }
.faq dt { line-height: 20px; margin-bottom: -1px; padding: 5px 0; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; background: url(img/common/icon-plus2.gif) no-repeat right 12px; text-transform: uppercase; font-weight: bold; font-family:"Times New Roman", Times, serif; }
.faq dt:hover, .faq dt.hover { cursor: pointer; color: #073873; }
.faq dt.open { background-image: url(img/common/icon-minus2.gif); }
.faq dd { display: none; padding: 5px 0; }
.faqcontrols { float: right; }
.faqcontrols a { font-weight: bold; }
.faqcontrols span { font-size: 125%; vertical-align: bottom; }
jQuery
$(document).ready(function(){
$(".faq dt").click(function() { $(this).next().slideToggle("fast"); $(this).toggleClass("open"); });
$(".faqexpand").click(function() { $(this).parent().next().children("dd").slideDown("fast"); return false; });
$(".faqcollapse").click(function() { $(this).parent().next().children("dd").slideUp("fast"); return false; });