jquery 展开折叠效果

仅供参考  图片 jquery.js 自己处理

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>在此处插入标题</title>
    <style>
        .div1{position: relative; border:1px solid red; width:200px; line-height: 30px;}
        .span1{border-bottom:1px solid #ccc; display: block;}
        .img1{
            position: absolute;
            top:5px;
            left:180px;
        }
    </style>
    <script language=‘javascript‘ src=‘../js/jquery.js‘></script>
    <script>
        $().ready(function() {
           $(‘.img1‘).bind(‘click‘, function() {
               if($(this).attr("src")=="../img/down.jpg"){
                   $(this).attr("src","../img/up.jpg");
                   $(this).next().toggle();
               }else{
                   $(this).attr("src","../img/down.jpg");
                   $(this).next().toggle();
               }
            });
        });
    </script>
</head>
<body>
<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
    <div class="div2">
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
</div>
<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
    <div class="div2">
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
</div>
<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
    <div class="div2">
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
</div>
<div class="div1"><span class="span1">商品管理</span><img src="../img/down.jpg" class="img1"/>
    <div class="div2">
        添加商品
        <br>
        管理商品
        <br>
        商品入库
        <br>
        浏览商品
    </div>
</div>
</body>
</html>
时间: 2024-10-20 02:00:02

jquery 展开折叠效果的相关文章

jquery实现的点击可以展开折叠的垂直导航菜单

jquery实现的点击可以展开折叠的垂直导航菜单:本章节介绍一种比较常见的导航菜单是如何实现的,它具有垂直结构,点击导航主标题可以展开或者折叠二级菜单.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" />

jquery垂直展开折叠手风琴二级菜单

最近新开发一个简单项目,用到左侧两级的菜单.习惯性的去网上扒jquery手风琴效果,结果悲剧了好久…… 是该认认真真去学jquery,练习自己写动画效果了.从理解别人代码开始吧! 注:jquery-1.8.3.min.js需要下载文件放到同级名为js的文件夹里. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery垂直展开折叠手风琴效果</title> <s

【转】Jquery折叠效果

转自:http://www.cnblogs.com/clc2008/archive/2011/10/25/2223254.html <!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/19

BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)

上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert),进度条(progress bar)等,能够很好减少前端工程师的代码量,实现更加丰富充实的页面. Bootstrap作为一套良好的前端工具,要实现现代的动态页面效果,javascript插件是必不可少的.它提供了12个基于JQuery类库的插件,包括模态窗口(Modals),滚动监控(Scrolls

Bootstrap基础7(标签、徽章、大屏展播、页面标题、缩略图、进度条、面板、折叠效果)

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>标签.徽章.

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

jquery-练习-折叠效果

<!DOCTYPE html > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bind折叠效果</title> <script type="text/

实现类似QQ的折叠效果

//  主要核心是点击自定义header来展开和收起每一组里面的cell,模型里面应该有isShow此属性来记录开展还是收起. //  ViewController.m//  实现类似QQ的折叠效果////  Created by skg_Myfly on 16/3/3.//  Copyright © 2016年 skg_Myfly. All rights reserved.// #import "ViewController.h" #import "QQCellModel.