小菜单
来源：互联网 发布：网络女主播职业丢人吗 编辑：程序博客网 时间：2024/05/17 08:30
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="logo.aspx.cs" Inherits="JQeury.logo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body{font-size:18px;}
#divFrame{width:360px;height:180px; border:solid 1px #eee;}
ul{ list-style-type:none;padding:0px;}
ul li{float:left;width:100px;height:20px;}
#divHeader{width:360px;height:30px; background-color:#eee;float:left;padding:0px;}
#divHeader h3{float:left;padding:0px;margin:0px;}
#divHeader span{float:right;}
#divContent{width:360px;height:150px;padding:3px;margin:2px;}
#divBot{float:right;margin-top:30px;padding:3px;}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#divHeader span').click(function () {
if ($('#divContent').is(':visible')) {
$('#divHeader span').text('展开');
//$('divContent').hide(2000);
$('#divContent').css('display', 'none');
}
else {
$('#divHeader span').text('挂起');
$('#divContent').show(2000);
}
})
//给简化加事件
$('#divBot span>a').click(function () {
if ($('#divBot span>a').text() == '简化') {
$('#divBot span>a').text('更多....');
$('li:gt(3)').hide(2000);
}
else {
$('#divBot span>a').text('简化');
$('li:gt(3)').show(2000);
}
})
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divFrame">
<div id="divHeader">
<h3>图书分类</h3>
<span>挂起</span></div>
<div id="divContent">
<ul>
<li><a href="#">11<i>(1100)</i></a></li>
<li><a href="#">22<i>(1100)</i></a></li>
<li><a href="#">33<i>(1100)</i></a></li>
<li><a href="#">44<i>(1100)</i></a></li>
<li><a href="#">55<i>(1100)</i></a></li>
<li><a href="#">66<i>(1100)</i></a></li>
<li><a href="#">77<i>(1100)</i></a></li>
<li><a href="#">88<i>(1100)</i></a></li>
<li><a href="#">99<i>(1100)</i></a></li>
<li><a href="#">00<i>(1100)</i></a></li>
</ul>
<div id="divBot"><span><a href="#">简化</a></span></div>
</div>
</div>
</form>
</body>
</html>
- 小菜单
- 模拟底部弹出小菜单
- 定时器 — 延时小菜单
- 一个类似Flash的小菜单
- 禁用标题小菜单的方法
- 实现简单地小菜单效果
- Myeclipse2016如何关掉浏览器小菜单
- 使用popwindows实现Actionbar右上角的小菜单
- 自定义控件之仿HD qq的弹出式小菜单
- 实现论坛的大菜单套小菜但的功能------datalist套datalist
- Android中应用TabLayout实现顶部Tab小菜单加滑动效果
- HTML5小菜
- Hello小菜
- 自由添加菜单,类似易趣的管理页面中的那些小菜单.javascript实现,可跨多种浏览器
- 11个家常小菜
- Ajax的一些小菜
- 小菜编程成长记
- 小菜编程成长记
- WAP2.0 XHTML MP
- ural 1031. Railway Tickets | poj 2355
- android gif动画
- Linux下用C语言API连接MySQL数据库
- 数据结构：一、线性表及例子操作
- 小菜单
- 四周任务2
- 互联网之敏捷开发
- android网络通信 接收和发送数据详解
- bash中"["的误区
- Oracle Sys和system用户、sysdba 和sysoper系统权
- 任务一。图
- linux命令后台运行
- C#——数组
