Question

在使用Symphony 2更新我现有的Twig模板中的链接时，我似乎遇到了一个问题。

我看起来每次更新格式href="{{ path('terms') }}的链接时都不想加载jQuery元素。

以下是index.html.twig的一部分

    <div class="site-header">
        <div class="main-header">
            <div class="container">
                <div id="menu-wrapper">
                    <div class="row">
                        <div class="logo-wrapper col-md-4 col-sm-2 col-xs-8">
                            <h1>
                                <a>Site Name</a>
                            </h1>
                        </div>
                        <div class="col-md-8 col-sm-10 col-xs-4 main-menu text-left">
                            <ul class="menu-first hidden-sm hidden-xs">
                                <li class="active"><a href="#">{{ 'About' }}</a></li>
                                <li><a href="{{ path('terms') }}">{{'Terms & Conditions' }}</a></li>
                                <li><a href="privacy">{{ 'Privacy Policy' }}</a></li>
                                <li><a href="#formname">{{ 'Subscribe' }}</a></li>
                                <li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li>
                            </ul>
                            <a href="#" class="toggle-menu visible-sm visible-xs"><i class="fa fa-bars"></i></a>
                        </div>
                    </div>
                </div>
                <div class="menu-responsive hidden-md hidden-lg">
                    <ul>
                        <li class="active"><a href="#">{{ 'About' }}</a></li>
                        <li><a href="terms">{{ 'Terms & Conditions' }}</a></li>
                        <li><a href="privacy">{{ 'Privacy Policy' }}</a></li>
                        <li><a href="#formname">{{ 'Subscribe' }}</a></li>
                        <li><a href="unsubscribe">{{ 'Unsubscribe' }}</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

使用旧格式的链接（即href="terms"）给了我我想要的内容但是我想知道在更新Twig格式的链接时我做错了什么（即下面）

<li><a href="{{ path('terms') }}">{{'Terms & Conditions' }}</a></li>

这是我的jQuery代码。浏览器控制台中的错误消息将我带到＆＃34;与菜单项对应的锚点＆＃34;下面的jQuery代码，所以我知道错误在哪里，但我不完全确定如何解决它。我的jQuery技能非常有限，所以我将不胜感激。

jQuery(document).ready(function($) {

    'use strict';

    /************** Toggle *********************/
    // Cache selectors
    var lastId,
        topMenu = $(".menu-first, .menu-responsive"),
        topMenuHeight = topMenu.outerHeight()+15,
        // All list items
        menuItems = topMenu.find("a"),
        // Anchors corresponding to menu items
        scrollItems = menuItems.map(function(){
          var item = $($(this).attr("href"));
          if (item.length) { return item; }
        });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
      var href = $(this).attr("href"),
          offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
      $('html, body').stop().animate({ 
          scrollTop: offsetTop
      }, 300);
      e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
       // Get container scroll position
       var fromTop = $(this).scrollTop()+topMenuHeight;

       // Get id of current scroll item
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return this;
       });
       // Get the id of the current element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : "";

       if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .parent().removeClass("active")
             .end().filter("[href=#"+id+"]").parent().addClass("active");
       }                   
    });



    $(window).scroll(function(){
         $('.main-header').toggleClass('scrolled', $(this).scrollTop() > 1);
     });



    $('a[href="#top"]').click(function(){
        $('html, body').animate({scrollTop: 0}, 'slow');
        return false;
    });


    $('.flexslider').flexslider({
      slideshow: true,
      slideshowSpeed: 3000,  
      animation: "fade",
      directionNav: false,
    });


    $('.toggle-menu').click(function(){
        $('.menu-responsive').slideToggle();
        return false;
    });


    /************** LightBox *********************/
      $(function(){
        $('[data-rel="lightbox"]').lightbox();
      });


});

Answer 1

我花了一段时间来弄明白（因为我不是jQuery的专家），但是我已经将上面的jQuery代码从href更改为li，所有这些都开始完美运行。代码的更新版本发布在

下面

scrollItems = menuItems.map(function(){
          var item = $($(this).attr("li"));
          if (item.length) { return item; }
        });

jQuery与树枝模板

1 个答案: