javascript - 将链接锚定到字段集中的目标

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

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

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> <fieldset>的并切换.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>