切換並滾動以定位

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>