标签：菜单 网页 2s removeClass 扇形 span get addClass
一、扇形菜单介绍
扇形菜单，就是将导航菜单制作成扇形的形状。简单来说就是通过点击一个按钮，弹出一个以这个按钮为圆心的扇形按钮菜单，（可以根据需要添加按钮个数）。可以通过改变一下半径的长度，实现扇形形状的大小。
图1.1 扇形菜单效果图
二、解析思路
通过分析扇形菜单页面，可以归纳总结出如下实现细节 ：
（1） 使用带有 touch 功能的 Zepto 文件实现。
（2） 使用类选择器、find（）筛选需要的元素。
（3） 使用 hasClass、removeClass、addClass 等方法来判断该扇形菜单是否处于打开状态，如果是打开状态，则关闭扇形菜单；如果是关闭状态，就打开它。hasClass(class)用于检查当前的元素是否含有某个特定的类，如果有，则返回true，class:用于匹配的类名。
三、制作过程
（1）首先当然是引入zepto.min.js文件。
|
<script type="text/javascript" src="js/zepto.min.js"></script> |
（2）利用h5实现扇形菜单的的基础布局，这里还是使用的bootstrap框架。
|
<div style="height:1000px;width: 300px;"></div> <div> <div><img src="img/menu.png" /><span></span></div> <div class="btn btn1" data-num="1"><span>照相</span></div> <div class="btn btn2" data-num="2"><span>定位</span></div> <div class="btn btn3" data-num="3"><span>音乐</span></div> <div class="btn btn4" data-num="4"><span>聊天</span></div> </div> |
（3）添加css样式（其他样式代码已省略）。这里简单介绍一下各种浏览器的属性：-moz代表firefox浏览器私有属性。-ms代表IE浏览器私有属性。-webkit代表chrome、safari私有属性。这种写法主要是为了兼容比较老的版本。
|
.btn{ -webkit-transition:bottom .2s,right .2s; -moz-transition:bottom .2s,right .2s; -o-transition:bottom .2s,right .2s; -ms-transition:bottom .2s,right .2s; transition:bottom .2s,right .2s; } |
（4）添加js代码实现最后的效果。
这里我们主要使用了hasClass，span.removeClass方法。removeClass([class])从所有匹配的元素中删除全部或者指定的类，class(可选)：一个或多个要删除的CSS类名，请用空格分开。addClass(class)为每个匹配的元素添加指定的类名，class:一个或多个要添加到元素中的CSS类名，请用空格分开。
|
<script type="text/javascript"> $(function(){ $(".menu").click(function(){ var span = $(this).find("span"); if(span.hasClass("open")){ span.removeClass("open").addClass("close"); $(".btn").removeClass("open").addClass("close"); }else{ span.removeClass("close").addClass("open"); $(".btn").removeClass("close").addClass("open"); } }); }); </script> |
END
编 辑 | 王楠岚
责 编 | 刘 连
where2go 团队
标签：菜单,网页,2s,removeClass,扇形,span,get,addClass 来源： https://blog.51cto.com/u_15281984/2957222
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。