jQuery列表的收缩效果，变色，添加好友的智能效果

qwh66

于 2014-08-14 09:14:12 发布

阅读量547

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qwh66/article/details/38553521

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如图：

添加一个<span>隐藏域用于显示结果！

源代码：

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 

$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
$(document).ready(function(){
$(".group").click(function(){
    $(".panel1").slideToggle("slow");

  });
});
$(document).ready(function(){
$(".addFriend").click(function(){
    $(".add").slideToggle("slow");

  });
});
$(document).ready(function(){
$('li').click(function() {
   var url ="http://www.baidu.com";   

 window.location.href = url; 
      
  });
});
function search()
{
  
   var newFriend=document.getElementById("newFriend").value;
   if(newFriend=='kobe')
   {  
 
       document.getElementById("addRes").style.display="block";
       document.getElementById("addbtn").style.display="block";
         document.getElementById("addbtn").style.display="inline";
       document.getElementById("searchRes").innerHTML='kobe';
     
   
   }else{
     document.getElementById("addRes").style.display="block";
     document.getElementById("addbtn").style.display="none";
    document.getElementById("searchRes").innerHTML= '没有此人';
}
}
</script>
 
<style type="text/css"> 

li:hover   {color:red; display:block;}
li:active  {color:yellow;}




p.flip,p.group,p.addFriend,div.add
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
cursor:pointer;
}
div.panel,div.panel1
{
margin:0px;
padding:5px;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel,div.panel1
{

display:block;

}
li {
cursor:pointer;

}

#addRes{
display:none;

}


</style>

</head>
 
<body>
<p class="addFriend" >添加好友(点击添加)</p> 
<div class="add">
<input type="text" id="newFriend"/>
<input type="button" value="查找" οnclick="search()">
<div id="addRes">
<span id="searchRes"></span>
<input type="button" value="添加" id="addbtn">
</div>
</div>
<p class="flip"><span>好友列表(点击查看)</span></p>
<div class="panel" >
<ul>
<li>KOBE</li>
<li>ALLEN</li>
<li>MCGRADY</li>
<li>JORDAN</li>
<li>JAME</li>
<li>WADE</li>

</div>
<p class="group" >群聊(点击查看)</p> 
<div class="panel1">
<ul>
<li><span>三人组</span></li>
<li>四人帮</li>
<li>INVENTEC</li>
<li>老板来碗骚泡</li>
<li>610窝</li>
<li>小眼睛联盟</li>
</div> 
</body>
</html>