手机端主题添加点击显示菜单和js库冲突策略

LinSan2019年01月11日zblog,
8条 629次

今天下午是教育局年度考核的时间,考虑到荒废1日很可惜,就约了廖先生帮忙解决菜单显示问题,于是狠狠的学习了一把toggle的用法。中间也出现了很多问题,所以不得不使用Team Viewer来远程操作,最终攻破技术难关,在zblogasp中实现了手机端菜单,特别鸣谢廖先生之慷慨。

手机端主题添加点击显示菜单和js库冲突策略

考虑到我的“简单页面2”本身也有使用js库,所以中间做了其它的尝试,而且我中途还离开电脑十几分钟,下面写的教程有一半是凭借猜测补充的哈:1段js库引用,或者本地化,然后js代码。

我引用的js库是:https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js (可以考虑下载到本地),具体放到<head></head>代码中,js引用应该都会,这里懒得写全。然后在footer里面,在最后个</body>前面放置如下代码(我试过,放在引用的js里面无效):

  1. <script>
  2. $("#nav-swith").click(function(){
  3. $("#menu").animate({
  4.     height:'toggle'
  5.   });
  6. });
  7. </script>

这样就赋予了#nav-swith的点击效果,显示#menu,具体如何显示的css需要根据自己口味调整。

意料之外的是,使用这个js库加载后,我的网站居然就有几个报错,然后侧栏跟随滑动也失效了。通过几轮替换排除法,终于摸清楚是由于sticky.js和 jquery.min.js冲突造成的。在我准备放弃的时候,林三突然有个想法,虽然它们两个是冲突,但是它们并不需要同时加载!

也就是pc端加载网页的时候不需要加载顶部手机端js,相反手机端也不需要加载sticky.js,于是百度找代码,能不能根据屏幕分辨率来选择加载哪个js代码,结果你别说,还真有这样的代码:

  1. <script type="text/javascript">
  2. if (screen.width<640)
  3.     document.write('<script type="text/javascript" src="1.js"><\/script>');
  4. else
  5.     document.write('<script type="text/javascript" src="2.js"><\/script>');
  6. </script>

就是这里犀利,哈哈!忍不住写这篇笔记的说。然后使用的时候又出现了新问题,代码溢出!经过仔细对比后发现,以上代码的write括号内的最后个<script>正确的写法是<\/script>,我认输。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

目前评论:8   其中:访客  7   博主  1

    • avatar 田百士网赚博客 0

      我想买博客模板,怎么联系您?

        • avatar LinSan Admin

          联系我扣扣328780215吧! :grin: :grin:

        • avatar 楚狂人博客 1

          加油!新年快乐

          • avatar 基地小组 1

            写得不错支持一下

            • avatar 点滴记录 2

              几个站同步进行,的确不简单

                • avatar LinSan 5

                  被你发现了,折腾让我快乐,乐在其中嘛!

                • avatar 镜缘轩 2

                  折腾折腾啥都学会了

                  • avatar 佐语先森 3

                    折腾就是不停的出现BUG,不停地修复BUG,然后在折腾中成长。

                  发表评论

                  :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: