切换和滚动锚

Toggle and scroll to anchor

本文关键字：滚动      更新时间：2023-09-26

我需要你的指示:

我正在尝试创建一个具有切换div的页面。我需要他们打开当我点击它，当我点击一个链接在菜单上，当我点击这个链接从另一个页面。我还需要当我单击菜单中的锚点时，它会切换正确的div并滚动到锚点。

我尝试了一些或多或少有效的方法:

  • 我的第一个问题是，我必须在动画工作的链接上点击两次。我发现$("#")。Live ('click'， function() {..可能是一个解决方案，但我不知道如何使用它。

  • 第二个问题，动画不工作从一个页面到另一个

  • 第三个问题，我认为我的代码语法不好，可以优化，但我不知道如何…

这是我的HTML: 
    <header id="header">
  <!--Menu-->
  <nav>
    <ul id="menu">
      <li><a href="index.html"><h2>TITRE1</h2></a>
        <ul>
          <li><a class="ancre-head" href="index.html#E">E</a></li>
          <li><a class="ancre-head" href="index.html#F">F</a></li>
          <li><a class="ancre-head" href="index.html#G">G</a></li>
          <li><a class="ancre-head" href="index.html#H">H</a></li>
        </ul>
      </li>
      <li><a href="gp.html"><h2>TITRE2</h2></a>
        <ul>
          <li><a class="ancre-head" href="gp.html#A">A</a></li>
          <li><a class="ancre-head" href="gp.html#B">B</a>
            <ul>
              <li><a class="ancre" href="gp.html#B-01">B-01</a></li>
              <li><a class="ancre" href="gp.html#B-02">B-02</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
<div class="toggle">
  <div id="A" class="toggle-head">
    <div class="toggle-head-content">
      <h3>A</h3>
    </div>
  </div>
  <div class="toggle-content">
    A
  </div>
</div>
<div class="toggle">
  <div id="B" class="toggle-head">
    <div class="toggle-head-content">
      <h3>B</h3>
    </div>
  </div>
  <div class="toggle-content">
    B
    <div id="B-01"></div>
    B-01
    <div id="B-02"></div>
    B-02
  </div>
</div>

和我的JS:

jQuery(document).ready(function() {
  $('.toggle-content').hide();
  jQuery('.toggle-head').click(function() {
    $(this).siblings('.toggle-content').slideToggle('slow');
    $(this).toggleClass('clicked');
  });
  jQuery('a.ancre-head').click(function() {
    var hash = document.location.hash.replace('#', '');
    $('#' + hash).each(function() {
      if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":hidden")) {
        $('#' + hash).siblings('.toggle-content').slideDown('slow');
        $('#' + hash).toggleClass('clicked');
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      } else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).siblings('.toggle-content').is(":visible")) {
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      }
    });
    return false;
  });
  jQuery('a.ancre').click(function() {
    var hash = document.location.hash.replace('#', '');
    $('#' + hash).each(function() {
      if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":hidden")) {
        $('#' + hash).parent('.toggle-content').slideDown('slow');
        $('#' + hash).parents().siblings('.toggle-head').toggleClass('clicked');
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      } else if (hash.indexOf($(this).attr("href")) != 1 && $('#' + hash).parent('.toggle-content').is(":visible")) {
        $('html, body').animate({
          scrollTop: $('#' + hash).offset().top - 20
        }, 500);
      }
    });
    return false;
  });
});
//SMOOTHSCROLL//
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^'//, '') == this.pathname.replace(/^'//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

如果你能帮助我了解我错在哪里，我会很高兴的!

谢谢!

Katapult

下面的纯HTML/CSS解决方案满足了您的所有需求，除了动画。它使用CSS :active和:target伪类的组合来实现所需的行为。为了工作，HTML也必须稍微修改一下。好处是，这些项目现在也可以通过键盘导航:)

.toggle-content > * {
  height: 0;
  overflow: hidden;
}
.toggle-head [id]:target,
.toggle-head:focus .toggle-content > *,
.toggle-head:target .toggle-content > * {
  height: auto;
}
<header id="header">
  <!--Menu-->
  <nav>
    <ul id="menu">
      <li><a href="gp.html"><h2>TITRE2</h2></a>
        <ul>
          <li><a class="ancre-head" href="#A">A</a>
          </li>
          <li><a class="ancre-head" href="#B">B</a>
            <ul>
              <li><a class="ancre" href="#B-01">B-01</a>
              </li>
              <li><a class="ancre" href="#B-02">B-02</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
</header>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="toggle">
  <div id="A" class="toggle-head" tabindex="0">
    <div class="toggle-head-content">
      <h3>A</h3>
    </div>
    <div class="toggle-content">
      <p>A content</p>
    </div>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
</p>
<p>
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
</p>
<p>
  fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat Lorem
</p>
<p>
  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
  do
</p>
<p>
  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
  nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
</p>
<p>
  elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<div class="toggle">
  <div id="B" class="toggle-head" tabindex="0">
    <div class="toggle-head-content">
      <h3>B</h3>
    </div>
    <div class="toggle-content">
      <p>B</p>
      <div id="B-01" tabindex="0">B-01</div>
      <div id="B-02" tabindex="0">B-02</div>
    </div>
  </div>
</div>

相关文章：