锚链接到 Fieldset 内的目标答案

【问题标题】：Anchor Link to Target Inside Fieldset锚链接到 Fieldset 内的目标
【发布时间】：2016-04-07 09:05:16
【问题描述】：

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

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

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

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

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

【问题讨论】：

我看不到您在哪里扩展字段集。你会先这样做，然后是回调中的其他内容。

标签： javascript jquery fieldset

【解决方案1】：

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

【讨论】：

没问题，愉快的编码。

【解决方案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));

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

【讨论】：