Question

我有一个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; });

Answer 1

在您希望页面转到的位置放置锚点链接。

E.g。

<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>

在页面访问时扩展DL列表

1 个答案: