当前位置: 首页 > 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>,我认输。

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

  1. 田百士网赚博客
    6楼
    田百士网赚博客

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

  2. 楚狂人博客
    5楼
    楚狂人博客

    加油!新年快乐

  3. 基地小组
    4楼
    基地小组

    写得不错支持一下

  4. 点滴记录
    地板
    点滴记录

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

  5. 镜缘轩
    板凳
    镜缘轩

    折腾折腾啥都学会了

  6. 佐语先森
    沙发
    佐语先森

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

手机端主题添加点击显示菜单和js库冲突策略:等您坐沙发呢!

发表评论

Gravatar

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