下拉切换效果
- 生活家居
- 生活用品
- 数码电器
- 生活超市
- 衣服鞋帽
手写插件最终实现的效果是 当调用此函数就可以实现下拉切换菜单效果：【$('#dropdown').dropdown();】
注意：因为写的是jQuery对象插件 必须引入jQuery
首先声明函数：
jQuery.fn.dropdown=function(){
//用一个变量接住找到的button
var jqbtn=this.children('button')
//给button添加简单样式
jqbtn.css({border:'1px solid #aaa',borderRadius:'6px',padding:'8px 16px',outline:'none',background:'#fff',cursor:'pointer'});
//找到‘ul’
var jqul=this.children('ul');
//给添加样式，先要隐藏ul当鼠标点击button时在显示
jqul.css({border:'1px solid #aaa',listStyle:'none',padding:'0',margin:'0',width:'100px',display:'none' ,textAlign:'center'});
//给按钮添加点击事件
jqbtn.click(functioan(){
//当鼠标点击按钮时 ，菜单显示，在点击时菜单隐藏
jqul.toggle();
});
}；
到这里一个简单的下拉插件就完成了
下面是胶囊式导航
胶囊式导航
首先声明函数：
jquery.fn.fill=function(){
//找到il
var jqlis=this.children('li');
//给li添加简单的样式
jqlis.css({display:'inline-block',padding:'4px',listStyle:'none',width:'80px',margin:'0 auto'});
//找到a 添加样式
var jqa=this.children('li').children('a');
jqa.css({padding:'4px',textDecoration:'none',color:'#0f0'});
//有两种方法可以实现
1.给li 绑定点击事件
2.给a 绑定点击事件
1.给li 绑定点击事件
jqlis.click(function(){
给点击的li添加新样式，兄弟删除新样式。这样当你点击哪个li 哪个li 就是你改变后的样式，没点击的li 不会改变样式
$(this).addClass('active').siblings('.active').removeClass('active');
}
2.给a 绑定点击事件
jqa.click(function(event){
//因为a 是个跳转链接，所以要阻止它跳转
event.preventDefault();
//给点击的a 添加新样式，同样删除兄弟添加的新样式
$(this).parent().addClass('active').siblings('.active').removeClass('active');
})