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

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

linsan2019-01-11 16:58zblog2,401 views8条评论

今天下午是教育局年度考核的时间，考虑到荒废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里面无效）：

<script>
$(“#nav-swith”).click(function(){
$(“#menu”).animate({
height:’toggle’
});
});
</script>

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

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

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

<script type=“text/javascript”>
if (screen.width<640)
document.write(‘<script type=“text/javascript” src=“1.js”><\/script>’);
else
document.write(‘<script type=“text/javascript” src=“2.js”><\/script>’);
</script>

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

jquery zblogasp

您可能还会对这些文章感兴趣！

手机端主题添加点击显示菜单和js库冲突策略：目前有8 条评论

6楼
佐语先森：

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

2019-01-18 下午2:41 回复
5楼
镜缘轩：

折腾折腾啥都学会了

2019-01-19 下午2:29 回复
4楼
点滴记录：

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

2019-01-19 下午9:04 回复
- LinSan博主：
  
  被你发现了，折腾让我快乐，乐在其中嘛！
  
  2019-01-22 上午1:26 回复
地板
基地小组：

写得不错支持一下

2019-01-21 下午12:38 回复
板凳
楚狂人博客：

加油！新年快乐

2019-02-04 上午11:05 回复
沙发
田百士网赚博客：

我想买博客模板，怎么联系您？

2019-03-13 下午7:05 回复
- LinSan博主：
  
  联系我扣扣328780215吧！
  
  2019-03-13 下午7:08 回复