锚定 Link 到目标内部字段集

Question

我正在link查看页面上折叠字段集中的部分。

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

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

<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

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

刚刚做了一个简单的改动。您可以在上面的注释行中看到。

Answer 2

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

将此添加到 jQuery 以切换 class .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 已修改，您可以单击 <fieldset> 的 <legend> 并切换 .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>

片段

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>



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

<!--For demo-->
<div class="spacer"></div>

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

锚定 Link 到目标内部字段集

Anchor Link to Target Inside Fieldset

javascript

jquery

fieldset