最新消息:

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

zblog linsan 24浏览 8评论

今天下午是教育局年度考核的时间,考虑到荒废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库冲突策略

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (8)

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