首页 > 代码库 > 手风琴效果
手风琴效果
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="http://www.mamicode.com/Css/Style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.mamicode.com/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#menu .children:gt(0)").hide();
$("#menu .parent").click(function(){
// 得到子元素
var children = $(this).next();
// 判断子元素是否隐藏
if ( children.is(":hidden")) {
$("#menu .children:visible").slideUp();
children.slideDown();
}
});
});
function showName(name) {
$("#txtName").val(name);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="menu" style="width:160px">
<div class="parent">我的好友</div>
<div class="children">
<div><img src="http://www.mamicode.com/Images/boy.gif" />天堂浪子</div>
<div><img src="http://www.mamicode.com/Images/girl.gif" />轻舞飞扬</div>
</div>
<div class="parent">我的大学</div>
<div class="children">
<div><img src="http://www.mamicode.com/Images/girl.gif" />风中雾</div>
</div>
<div class="parent">黑名单</div>
<div class="children"></div>
<div class="parent">白名单</div>
<div class="children"></div>
</div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
</form>
</body>
</html>