Question

我链接到页面上折叠的字段集内的部分。

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

我已完成所有滚动操作，直到我将目标隐藏在折叠的字段集中，然后功能中断。

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

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

然后我的jQuery滚动...

(function ($) {
        var $root = $('html, body');
        $('a').click(function() {
            var href = $.attr(this, 'href');
            $root.animate({
                scrollTop: $(href).offset().top
            }, 500, function () {
                window.location.hash = href;
            });
            return false;
        });
    }(jQuery));

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

Answer 1

在<legend>中添加<fieldset>元素，并将<legend>定位为#section1。

将此添加到jQuery以切换课程.collapsed和.expanded：

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已修改，因此您可以点击<legend>的{{1}}并切换<fieldset>和.collapsed。

.expanded

<强>段

＆＃13;

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

＆＃13;

(function($) {
  var $root = $('html, body');
  $('a').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
      scrollTop: $(href).offset().top
    }, 500, function() {
      window.location.hash = href;
    });
    var exp = $(href).parent();
    exp.toggleClass('collapsed', 'expanded');

    return false;
  });

}(jQuery));

＆＃13;

body {
  font: 400 16px/1.4 'Verdana';
}
fieldset {
  width: 400px;
  position: relative;
}
legend {
  margin-top: 25%;
  text-align: center;
  font-size: 24px;
}
a {
  width: 100%;
  text-decoration: none;
  display: inline-block;
}
.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';
}
.spacer {
  height: 700px;
  clear: both;
}

＆＃13;

Answer 2

(function ($) { var $root = $('html, body'); $('a').click(function() { var href = $.attr(this, 'href'); $(href).parent().show(); //updated line $root.animate({ scrollTop: $(href).offset().top }, 500, function () { window.location.hash = href; }); return false; }); }(jQuery));

刚做了一个简单的改变。你可以看到，上面评论了一行。

锚点链接到Fieldset内的目标

2 个答案: