手写胶囊式导航和下拉切换效果

<h1>下拉切换效果</h1>
<div id="dropdown">
　　<button >添加商品</button>
　　<ul>
　　　　<li>生活家居</li>
　　　　<li>生活用品</li>
　　　　<li>数码电器</li>
　　　　<li>生活超市</li>
　　　　<li>衣服鞋帽</li>
　　</ul>
</div>

手写插件最终实现的效果是 当调用此函数就可以实现下拉切换菜单效果：【$('#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();

　　});

}；

到这里一个简单的下拉插件就完成了

 

 

下面是胶囊式导航

<h1>胶囊式导航</h1>
<ul class="pills">
<li><a href="#">生活家居</a></li>
<li><a href="#">衣服鞋帽</a></li>
<li><a href="#">户外用品</a></li>
<li><a href="#">生活用品</a></li>
<li><a href="#">家居用品</a></li>
</ul>

首先声明函数：

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');

}) 

转载于:https://www.cnblogs.com/suriz/p/6509062.html