切换并滚动以定位

Question

我需要你的指导：

我正在尝试创建一个具有切换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;
      }
    }
  });
});

如果您能帮助我了解我哪里错了，我会很高兴！

谢谢 ！

卡塔珀特

Answer 1

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