javascript - 切换并滚动到 anchor

标签 javascript jquery html css

我需要你的指示:

我正在尝试创建一个带有切换 div 的页面。我需要它们在我单击它时打开，当我单击菜单中的链接时以及当我从其他页面单击此链接时。我还需要当我单击菜单中的 anchor 时，它会切换正确的 div 并滚动到 anchor 。

我尝试了一些或多或少有用的东西:

  • 我的第一个问题是我必须在链接上单击两次才能使动画起作用。我发现 $("#").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;
      }
    }
  });
});

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

谢谢!

弹射器

最佳答案

下面的纯 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>

关于javascript - 切换并滚动到 anchor ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40151327/

上一篇：javascript - 如果 margin left == 百分比

下一篇：javascript - 如何访问 iframe 元素选择器？

相关文章：

javascript - 从 ng-click 调用 $event 上的 JQuery 函数

javascript - 在放大 View 上显示图像标题

javascript - 你怎么知道一个对象是否是javascript中的JSON？

javascript - 单击按钮并打开子菜单后，如何使按钮保持在原位

html - CSS选择器的优先级

javascript - innerHTML 显示函数，而不是函数的返回值

javascript - 强制用户从动态添加/删除字段的自动完成选项中选择文本

javascript - 删除数组 Javascript 中所有重复项

jQuery 按钮导航到具有路由值的操作 Controller ？

html - 在html中生成PDF文件时如何设置字体系列

©2024 IT工具网  联系我们