Question

我们正试图获取一个锚定链接来关闭＆＃34;菜单＆＃34;通过向正文添加一个类。

问题是菜单已锚定链接作为导航的一部分。尝试添加一个检查类的函数，然后在转到锚定链接之前运行toggleClass。

<script type="text/javascript">
$(document).ready(function(e) {

// Working JS that Identifies the Class and Adds the "menu_open" or toggles to Subtract
$(".menu, .arrow1, .menuAccountAccess").on("click", function () {
    $(this).toggleClass("active");
    $('body').toggleClass('menu_open');
});

// The Main Navigation has some anchored links and the below code does not work as we also have a # link scroll code
$(".NavigationAnchoredLinkClass").on("click", function () {
    $('body').toggleClass('menu_open');
});

// Scroll function for Anchored Links  
$(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 - 60
            }, 1000);
        return false;
      }
    }
  });
 });

});
</script>

<body class="">
      <p>
      Anchored Links work fine with a <a href="#anchoredlink">Link</a>
      </p>
      <ul>
        <li class="NavigationAnchoredLinkClass">
          <a href="siteurl/#achoredlink">Link</a>
        </li>
      </ul>
</body>

Answer 1

我最终在锚定链接滚动中添加了一个检查类。所有检查类都是查看body div是否有＆＃34; menu_open＆＃34;。当＆＃34; menu_open＆＃34;发现它将类切换为空白，然后在另一个函数运行时关闭菜单。

<script type="text/javascript">
$(document).ready(function(e) {
  $(function() {
    $('a[href*="#"]:not([href="#"])').click(function() {

    // checks body for class
     if ($('body').hasClass('menu_open')) {
         // if class is found it toggles the class to blank which closes the menu
         $('body').toggleClass('menu_open');
     }

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

      }, 1000);
      return false;
    }
  }
});

}）;

锚定链接滚动干扰菜单上的关闭功能

1 个答案: