Javascript 指向字段集内目标的锚定链接

我正在链接到页面上折叠字段集中的部分

当用户单击此链接时，我想向下滚动页面并打开字段集以显示内容

我设置了所有的滚动，直到我将目标隐藏在折叠的字段集中，然后功能中断

<a href="#section1">Section 1</a>

<fieldset class="collapsed">
  <div id="section1">
   ..content
  </div>
</fieldset>

如何单击锚点打开字段集，然后向下滚动到它？

（函数（$）{
var$root=$（'html，body'）；
$（'a'）。单击（函数（）{
var href=$.attr（这是'href'）；
$（href）.parent（）.show（）；//更新的行
$root.animate({
scrollTop:$（href）.offset（）.top
}，500，函数（）{
window.location.hash=href；
});
返回false；
});
}（jQuery））

只是做了一个简单的改变。您可以在上面的注释行中看到。
在
中添加
元素，并将
作为
#section1
的目标

将其添加到jQuery以切换类
。折叠的
和
。展开的
：

var exp = $(href).parent();
exp.toggleClass('collapsed', 'expanded');

您还需要使用CSS来创建
.collapsed
和
.expanded
状态：

.collapsed {
  height: 0;
  border: none;
}
.expanded {
  height: 300px;
}
#section1 {
  height: 36px;
  position: relative;
  z-index: 1;
  background: #000;
  color: #fc2;
  border-radius: 6px;
  width: 100%;
}
.collapsed > .content {
  font: 400 0/0 'Verdana';
  height: 0;
  line-height: 0;
  opacity: 0;
}
.content {
  position: relative;
  top: 0;
  left: 0;
  height: 100%;
  width: auto;
  font: 400 16px/1.4 'Verdana';
}    

HTML已修改，因此您可以单击
的
，并切换
.collapsed
和
expanded

<fieldset class="collapsed">
    <legend id="section1"><a href="#section1">Heading</a></legend>
    <div class="content">
    ..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
    </div>
</fieldset>

正文{
字体：400 16px/1.4“Verdana”；
}
字段集{
宽度：400px；
位置：相对位置；
}
传奇{
利润率最高：25%；
文本对齐：居中；
字体大小：24px；
}
a{
宽度：100%；
文字装饰：无；
显示：内联块；
}
.崩溃{
身高：0；
边界：无；
}
.扩大{
高度：300px；
}
#第一节{
高度：36px；
位置：相对位置；
z指数：1；
背景：#000；
颜色：#fc2；
边界半径：6px；
宽度：100%；
}
.collapsed>.content{
字体：400 0/0“Verdana”；
身高：0；
线高：0；
不透明度：0；
}
.内容{
位置：相对位置；
排名：0；
左：0；
身高：100%；
宽度：自动；
字体：400 16px/1.4“Verdana”；
}
.垫片{
高度：700px；
明确：两者皆有；
}

…内容XXXXX XXXXXXXXXX nnnnnnnnnn Hbyigyugvyibrh fwgewg wbbbbb uhuihoijpiok ertru efwgwrhnj
我看不出您在哪里扩展字段集。你可以先这样做，然后在回调中做其他的事情。没问题，愉快的编码。
<fieldset class="collapsed">
    <legend id="section1"><a href="#section1">Heading</a></legend>
    <div class="content">
    ..content XXXXX xxxxxxxxxxxnnnnnnnnnnnnn hbyigyugvyibrgh fwgewg wefgeh bbbbb uhuhouihoijpiok erhtru efwgwrhnj
    </div>
</fieldset>