将链接定位到字段集中的目标

Anchor Link to Target Inside Fieldset

本文关键字：集中 目标 字段 链接 定位      更新时间：2024-01-31

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

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

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

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

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

在<fieldset>中添加<legend>元素，并将<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已修改，因此您可以单击<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>

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

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

相关文章：