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

今天下午是教育局年度考核的时间,考虑到荒废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>,我认输。

未经允许不得转载:林三定制 » 手机端主题添加点击显示菜单和js库冲突策略

赞 (0) 打赏

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. 佐语先森折腾就是不停的出现BUG,不停地修复BUG,然后在折腾中成长。回复
  2. 镜缘轩折腾折腾啥都学会了回复
  3. 点滴记录几个站同步进行,的确不简单回复
    • LinSan被你发现了,折腾让我快乐,乐在其中嘛!回复
  4. 基地小组写得不错支持一下回复
  5. 楚狂人博客加油!新年快乐回复
  6. 田百士网赚博客我想买博客模板,怎么联系您?回复
    • LinSan联系我扣扣328780215吧! 😀 😀回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏