Jquery实现推拉式菜单，并实现图标的折叠和展开

最新推荐文章于 2017-10-30 13:05:09 发布
最新推荐文章于 2017-10-30 13:05:09 发布
阅读量2k 收藏
点赞数
分类专栏： ASP.NET专栏 文章标签： jquery server asp class listview table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuwenwu/article/details/6668174
版权

最近项目中为了使查看时视图更清晰明了，需要实现一个分组展示的功能，这里用Jquery做了一个，记录下来，以便下次使用，效果如图所示：

 

CSS代码：

  .sapdiv{
    width:16px;
    height:17px;
    background:url(../images/sap01_data_item_tab02.gif) ;
}

.sapdiv1{
    width:16px;
    height:17px;
    background:url(../images/sap01_data_item_tab01.gif) ;
}


前台代码：

<asp:ListView ID="ListView1" runat="server" EnableModelValidation="True" OnItemDataBound="ListView1_ItemDataBound"
                        OnPreRender="ListView1_PreRender">
                        <EmptyDataTemplate>
                            <table width="100%" class="data_header">
                                <tr>
                                    <td rowspan="2" class="t12s" width="60">
                                        操作
                                    </td>
                                    <td rowspan="2" class="t12s" width="150">
                                        项目名称
                                    </td>
                                    <td rowspan="2" class="t12s" width="180">
                                        主要建设内容
                                    </td>
                                    <td rowspan="2" class="t12s" width="60">
                                        建设性质
                                    </td>
                                    <td rowspan="2" class="t12s" width="60">
                                        建设年限
                                    </td>
                                    <td rowspan="2" class="t12s" width="80">
                                        申请资金
                                    </td>
                                    <td colspan="4" class="t12s" style="background-color: #C0C0C0">
                                        <% =year.ToString() %>年投资建议计划
                                    </td>
                                    <td rowspan="2" class="t12s">
                                        备注
                                    </td>
                                </tr>
                                <tr>
                                    <td width="60">
                                        合计
                                    </td>
                                    <td width="60">
                                        总部投资
                                    </td>
                                    <td width="60">
                                        企业自筹
                                    </td>
                                    <td width="60">
                                        其他
                                    </td>
                                </tr>
                            </table>
                            <table width="100%" class="data_item">
                                <tr>
                                    <td colspan="12">
                                        没有数据！
                                    </td>
                                </tr>
                            </table>
                        </EmptyDataTemplate>
                        <ItemTemplate>
                            <table class="data_item">
                                <tr>
                                    <th style="width:40px;">
                                        <div class="sapdiv1">
                                            <a href="#"></a>
                                        </div>
                                    </th>
                                    <th colspan="12" class="data_item_separ" style="width: 95%;">
                                        <strong>企业名称：<asp:Label ID="lblOrgName" runat="server" Text='<%# Eval("OrganizationName") %>' />
                                            (版本:<asp:Label ID="lblVersion" runat="server" Text='<%# Eval("PlanVersion") %>' />.0)<span style="color:Red;">【<asp:Label ID="Label1" runat="server" Text='<%# Eval("OrgNatureName") %>' />】</span>
                                            <asp:HiddenField ID="hfOrgId" runat="server" Value='<%# Eval("OrganizationId") %>' />
                                        </strong>
                                    </th>
                                </tr>
                            </table>
                            <div class="data_table1" id="detail<%# Container.DataItemIndex %>">
                                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" ShowHeader="false"
                                    DataKeyNames="ProjectPlanId" EmptyDataText="没有可显示的数据记录。" EnableModelValidation="True"
                                    Width="100%" CssClass="data_item">
                                    <Columns>
                                        <asp:TemplateField ShowHeader="False" HeaderText="操作">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="ckItem" runat="server" />
                                            </ItemTemplate>
                                            <ItemStyle Width="40" />
                                        </asp:TemplateField>
                                        <asp:TemplateField ShowHeader="False" HeaderText="操作">
                                            <ItemTemplate>
                                                <asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/licon_005.gif" OnClientClick='<%# Eval("ProjectPlanId","return JumpViewProjectPlan(\"{0}\")") %>'
                                                    ToolTip="查看" CausesValidation="False" />
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ProjectPlanName" HeaderText="项目名称" ItemStyle-Width="150" />
                                        <asp:TemplateField HeaderText="主要建设内容">
                                            <ItemTemplate>
                                                <div style="text-align: left">
                                                    <asp:Label ID="Label2" runat="server" Text='<%# ReWriteBuildString(Eval("ProjectPlanContent"),15) %>'
                                                        ToolTip='<%# Eval("ProjectPlanContent") %>'></asp:Label>
                                                </div>
                                            </ItemTemplate>
                                            <ItemStyle Width="180" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="建设性质">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelStatus" runat="server" Text='<%# GetBuildString(Eval("ProjectType")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ProjectPlanYearBuild" HeaderText="建设年限" ItemStyle-Width="60" />
                                        <asp:TemplateField HeaderText="申请资金">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelMoneyRequest" runat="server" Text='<%# FormatMoney(Eval("MoneyRequest")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="80" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="合计">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelMoneySum" runat="server" Text='<%# FormatMoney(Eval("MoneySum")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="总部投资">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelMoneyGroup" runat="server" Text='<%# FormatMoney(Eval("MoneyGroup")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="企业自筹">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelMoneyCompany" runat="server" Text='<%# FormatMoney(Eval("MoneyCompany")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="其他">
                                            <ItemTemplate>
                                                <asp:Label ID="LabelMoneyOther" runat="server" Text='<%# FormatMoney(Eval("MoneyOther")) %>'></asp:Label>
                                            </ItemTemplate>
                                            <ItemStyle Width="60" />
                                        </asp:TemplateField>
                                        <asp:TemplateField HeaderText="备注">
                                            <ItemTemplate>
                                                <div style="text-align: left">
                                                    <asp:Label ID="Label3" runat="server" Text='<%# ReWriteBuildString(Eval("ProjectPlanRemark"),15) %>'
                                                        ToolTip='<%# Eval("ProjectPlanRemark") %>'></asp:Label>
                                                </div>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </div>
                        </ItemTemplate>
                        <LayoutTemplate>
                            <table id="Table2" runat="server" style="width: 100%">
                                <tr id="Tr1" runat="server">
                                    <td id="Td1" runat="server">
                                        <table class="data_header" style="width: 100%" class="data_header">
                                            <tr id="Tr2" runat="server">
                                                <td id="Td15" runat="server" rowspan="2" class="t12s" width="40">
                                                    操作
                                                </td>
                                                <td id="Td2" runat="server" rowspan="2" class="t12s" width="60">
                                                    查看详细
                                                </td>
                                                <td id="Td3" runat="server" rowspan="2" class="t12s" width="150">
                                                    项目名称
                                                </td>
                                                <td id="Td4" runat="server" rowspan="2" class="t12s" width="180">
                                                    主要建设内容
                                                </td>
                                                <td id="Td5" runat="server" rowspan="2" class="t12s" width="60">
                                                    建设性质
                                                </td>
                                                <td id="Td7" runat="server" rowspan="2" class="t12s" width="60">
                                                    建设年限
                                                </td>
                                                <td id="Td8" runat="server" rowspan="2" class="t12s" width="80">
                                                    申请资金
                                                </td>
                                                <td id="Td11" runat="server" colspan="4" class="t12s" style="background-color: #C0C0C0">
                                                    <% =year.ToString() %>年投资建议计划
                                                </td>
                                                <td id="Td9" runat="server" rowspan="2" class="t12s">
                                                    备注
                                                </td>
                                            </tr>
                                            <tr id="Tr3" runat="server" class="separator_bottom">
                                                <td id="Td16" runat="server" width="60">
                                                    合计
                                                </td>
                                                <td id="Td17" runat="server" width="60">
                                                    总部投资
                                                </td>
                                                <td id="Td19" runat="server" width="60">
                                                    企业自筹
                                                </td>
                                                <td id="Td20" runat="server" width="60">
                                                    其他
                                                </td>
                                            </tr>
                                            <tr id="itemPlaceholder" runat="server" class="data_item">
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </LayoutTemplate>
                    </asp:ListView>


脚本部分：

<script type="text/javascript">

    $(document).ready(function () {

        $(".data_table1").hide();

        $(".sapdiv1").click(function () {
            $(".data_table1").hide();
            $("div.sapdiv").each(function () {
                $(this).removeClass();
                $(this).addClass("sapdiv1");
            });

            $(this).removeClass();
            $(this).addClass("sapdiv");
            $(this).parent().parent().parent().parent().next().show();

            //cookie.set("cookieName", $(this).attr("id"));
        });

        var current = null; //cookie.get("cookieName");
        if (current) {
            $(current).removeClass();
            $(current).addClass("sapdiv");
            $(current).parent().parent().parent().parent().next().show();
        } else {
            var items = $(".sapdiv1");
            if (items.length > 0) {
                $(items[0]).parent().parent().parent().parent().next().show();
                $(items[0]).attr("class", "sapdiv");
            }
        }
    });
</script>


该脚本还可以通过cookie保存选中的状态，这里没有实现，有兴趣的同学可以晚上一下，发布到留言里。

xuwenwu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery和CSS3全屏推拉式滑动菜单特效
12-12
这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件。这个插件的效果是当点击了主菜单按钮时，全屏菜单从屏幕左侧滑出，主菜单按钮动态旋转更换图标。
html滑动全屏,jQuery和CSS3全屏推拉式滑动菜单特效
weixin_39875516的博客
06-08 321
这是一款效果非常炫酷的jQuery和CSS3全屏推拉式滑动菜单特效插件。这个插件的效果是当点击了主菜单按钮时，全屏菜单从屏幕左侧滑出，主菜单按钮动态旋转更换图标。当再次点击主菜单按钮时，全屏菜单又从右向左滑会去。下面是一张描述这个过程的动态gif图片：HTML结构该全屏滑动菜单的HTML结构分为三个部分：包含可见内容的元素，一个用于包含全屏导航菜单的div.cd-nav和一个用于触发事件的按钮.c...
使用js实现推拉式菜单
愿记忆Tel一切安好
12-14 1372
#Cai1 { BACKGROUND-COLOR: #336699; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; LEFT: 0px; POSITION: absolute;
html菜单的折叠 图标+-的变化
lunzi3775的博客
10-30 7221
function showmenu(id) { var list = document.getElementById("list"+id); var menu = document.getElementById("menu"+id) if (list.style.display=="none") { document.getElementById("list"+id).style.dis
推 拉 式 菜 单
谭洪星
02-17 914
这段程序放在与之间#D1 { BACKGROUND-COLOR: lightblue; BORDER-BOTTOM: white 2px outset;  BORDER-LEFT: white 2px outset;  BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; LEFT: 0px; POSITION: absol
JQuery实现折叠式菜单的详细代码
10-15
在本文中，我们将深入探讨如何使用JQuery来实现折叠式菜单。折叠式菜单是一种常见的网页交互元素，它允许用户点击一个菜单项后展开或收起其子菜单项，以节省页面空间并提供更好的用户体验。我们将分析提供的代码示例...
jquery实现折叠菜单效果【推荐】
10-20
3. 引入jQuery库，并编写JavaScript代码，监听触发器的点击事件，使用`toggleClass()`切换状态标识，以及`slideToggle()`实现内容区域的平滑展开和折叠。 掌握这些知识后，你可以灵活地应用到自己的项目中，创建出...
基于jQuery实现以手风琴方式展开和折叠导航菜单
10-22
主要介绍了基于jQuery实现以手风琴方式展开和折叠导航菜单的相关资料,需要的朋友可以参考下
jQuery实现折叠、展开的菜单组效果代码
10-23
主要介绍了jQuery实现折叠、展开的菜单组效果代码,涉及jQuery针对页面元素属性动态操作的相关技巧,展开折叠效果平滑自然,需要的朋友可以参考下
推拉式菜单
shuangyvshenshi的专栏
09-22 473
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 无标题文档 #D1 { BACKGROUND-COLOR: lightblue; BORDER-BOTTOM: white 2px outset; BORDER-
页面中推拉菜单的简易实现
jackie9305的博客
01-07 474
直接将下面这段代码复制到html中就可以看到效果啦！ &lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;&lt;!--.link {color : #000000;text-decoration : none;}A.link:hover {color : red;}A.link:active {color : #000000;text-dec...
2024-2025-1学期选课第一轮停开课程.xlsx
07-09
2024-2025-1学期选课第一轮停开课程.xlsx
go-proxy-bing基于New Bing的开源Bing AI源码，无需登录即可畅聊
07-10
go-proxy-bing基于New Bing的开源Bing AI源码，无需登录即可畅聊
React简介及资源推荐.docx
07-10
推荐了react框架资源，内容涉及学习书籍、学习视频、练习网站、项目推荐
Matlab下载安装详细教程.pdf
07-10
Matlab的下载与安装过程相对直接，但需要注意一些细节以确保安装成功。以下是一个详细的Matlab下载与安装教程： 一、下载Matlab 1.访问MathWorks官网： 1.打开浏览器，输入MathWorks的官方网站地址：https://www.mathworks.com/。 2.在官网上，你可以找到Matlab的下载页面。 2.选择下载版本： 1.在下载页面上，根据你的需求选择合适的Matlab版本。例如，学生可以选择“MATLAB Student”版本，教育工作者或企业用户可以选择其他版本。 2.注意选择与你操作系统（如Windows、Mac、Linux）相匹配的版本。 3.下载安装包： 1.点击所选版本的“Download”按钮，进入下载页面。 2.根据页面提示，选择适合你操作系统的下载选项，并点击下载按钮开始下载。 二、安装Matlab 1.解压安装包： 1.下载完成后，找到Matlab的安装包文件（通常是.iso或.exe格式）。 2.使用压缩软件（如WinRAR、7-Zip等）解压安装包到一个自定义的文件夹中。 2.运行安装程序： 1.打开解压后的文件夹，找到“set
谷歌浏览器新版本安装程序
最新发布
07-10
谷歌浏览器新版本安装程序
065N03L-VB TO263一款N-Channel沟道TO263的MOSFET晶体管参数介绍与应用说明
07-10
065N03L-VB TO263；Package：TO263；Configuration：Single-N-Channel；VDS：30V；VGS：20（±V）；Vth：1.7V；RDS(ON)=8mΩ@VGS=4.5V；RDS(ON)=6mΩ@VGS=10V；ID：70A；Technology：Trench；
字节跳动bytedance面试算法真题
07-10
字节跳动的面试算法真题汇总
EMI技术讲解.doc
07-10
EMI技术讲解.docEMI技术讲解.docEMI技术讲解.docEMI技术讲解.docEMI技术讲解.docEMI技术讲解.docEMI技术讲解.doc
使用jQuery的折叠式菜单，可以通过选择器来实现
07-15
是的，使用jQuery可以通过选择器来实现折叠式菜单。折叠式菜单通常使用`slideToggle()`方法来切换菜单的显示和隐藏状态。以下是一个简单的示例： HTML: ```html 菜单 菜单项1 菜单项2 菜单项3 ``` CSS: ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值