Question

我的网站上有一个问题，我已经调试了好几天了，但是我不知何故在哪里寻找解决方案。在my website向下滚过折叠a＆＃34;向上箭头＆＃34;按钮应该出现，但它不会。如果单击放大镜，导航栏下方的部分应向下移动，并且必须显示搜索栏，但它不会显示。

这些功能依赖于两个jQuery脚本：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

对于上述效果，使用了巨大的js：

<script  src="{static_url}/tpl-buddy-011/js/jquery.magnific-popup.min.js"></script>

初始化在init-script中放在一起

/*
         * Search 
        ---------------------------------------------------- */
        $('.search-trigger').click(function(e) {
            e.preventDefault();
            $('html, body').scrollTop(0);
            $('section.mobile-navigation').hide();
            $('.mobile-nav-trigger').removeClass('active');
            $('body').toggleClass('show-search');
            $('.search-input input[type="text"]').focus();
        });
/* 
         * Menu for Mobile
        ---------------------------------------------------- */ 
        $('.mobile-nav-trigger').click(function(e) {
            e.preventDefault();
            $('body').removeClass('show-search');
            $(this).toggleClass('active');
            $('section.mobile-navigation').slideToggle('fast');
        });

        $(".totoplink a").click(function(e) {
            e.preventDefault();
            $('html, body').animate({
                scrollTop: $("#top").offset().top -88
            }, 800);
        });

来自搜索栏html代码的片段和＆＃34;转到顶部＆＃34;：

{* Main navigation *}
            <nav class="pull-right">
              {Navigator loadprops='0' template='buddy011-navigation' number_of_levels='3'}
            </nav>
            <div class="search-wrapper">
              <a href="#" class="search-trigger">{svg use="search"}</a>
            </div>
          </div>
        </div>
      </div>
    </header>


    <div class="wrapper">
    {* mobile navigation *}
      <section class="mobile-navigation">
        {Navigator loadprops='0' template='buddy011-navigation-mobile'  number_of_levels="3"}
      </section>

      {* Search *}
        <section class="search-input">
          {Search search_method="post" formtemplate='buddy011-searchform' resultpage="{if isset($search_page)}{$search_page}{/if}"}
        </section>

我可以把css放在那里，但是那些代码会退出很多代码，这样就不会让帖子更加清晰。我的问题是，我如何调试网站以找到按钮的缺失行为？

谢谢！

Answer 1

我不明白顶级按钮和搜索的代码。滚动到顶部代码的详细信息请点击此链接 SCROLL TO TOP BUTTON 您可以使用此代码为我工作。

<script>
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

});
</script>

Answer 2

由于穆克什的答案而找到它。注意到与FlexSlider相关的错误（不再存在），但该错误导致了非功能。

Answer 3

一次遇到相同类型的问题，经过长期调查，发现导致js文件加载顺序改变的原因。

转到顶部，搜索按钮不响应

3 个答案: