css - 在页面访问时扩展 DL 列表

Question

我有一个页面，在 dl 中有很多内容，可以通过 JQuery 展开/折叠

我想要完成的是在另一个页面上有一个链接，该链接会将用户带到 dl 中的特定部分。

我尝试使用常规页面 anchor ，但它们不会扩展列表。

<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; });

Answer 1

将 anchor 链接放在您希望页面转到的任何位置。

例如

<dl class="faq">
    <dt style="text-indent:20px; font-size: 12px; font-weight: normal; padding-top: 0px; background: none;"><u>TITLE</u></dt>
    <dd>
        <a name="anchorHere"></a>
        <p>
        content
        </p>
    </dd>
</dl>

然后在链接中将是:

<a href="yourpage.html#anchorHere">Click here</a>