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

LinSan2019年01月11日zblog,

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

考虑到我的“简单页面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>,我认输。

avatar

发表评论

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