js可折叠商品类别动态三级滑动菜单

最新推荐文章于 2021-04-29 17:05:09 发布

吴丘

最新推荐文章于 2021-04-29 17:05:09 发布

阅读量1k

点赞数

分类专栏： Jquery+Css 文章标签： js css 商品类别滑动三层菜单

本文链接：https://blog.csdn.net/yibingde/article/details/38248907

版权

本文介绍了一种动态实现商品类别三级滑动菜单的方法，菜单根据实际商品类别数量自适应显示，允许用户随时添加删除。通过使用GridView和DataList控件结合CSS样式布局，动态判断并设置CSS样式。同时提供了不同层级目录的展示示例。

摘要由CSDN通过智能技术生成

js商品类别三级滑动菜单网上实例不少，大多为静态，且商品类别数量及格式统一。但公司的项目有新需求，商品类别不足的区域要隐藏，商品类别多的地方要扩大区域，商品类别数据用户可随时添加删除。

1.三级目录多商品类别图例：

2.无三级目录商品类别图例：

3.二级商品目录不足图例：

要实现上述功能的确费一番脑筋，不过参照大量js实例后还是实现完成了，这里说说其基本原理：建立用户控件，GridView控件嵌套两层DataList构成三层数据绑定，css样式布局定位。在RowDataBound事件中判断是否存在二级及三级菜单，动态确定页面的CSS样式。前台代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Catalog_Index1.ascx.cs"
    Inherits="UserControl_Catalog_Index1" %>
<div class="category">
    <div class="cat_list">
        <table cellspacing="0" cellpadding="0" border="0" width="100%" style="vertical-align: middle;
            height: auto">
            <tr valign="top">
                <td valign="top" style="height: auto">
                    <asp:GridView ID="grdList" AllowPaging="False" AutoGenerateColumns="False" RowStyle-Height="25"
                        HorizontalAlign="Center" BorderWidth="0px" GridLines="None" ShowFooter="False"
                        ShowHeader="False" DataKeyNames="CatalogNo" Width="100%" runat="server" CellPadding="0"
                        PagerSettings-Visible="false" OnRowDataBound="grdList_RowDataBound">
                        <Columns>
                            <asp:TemplateField>
                                <ItemTemplate>
                                    <div class="h2_cat">
                                        <div id="div_h2" runat="server" class="sidelist">
                                            <span>
                                                <h2>
                                                    <table cellspacing="0" width="100%" height="30px" cellpadding="0" border="0" style="border-bottom: dotted 1px #DDDDDD;">
                                                        <tr valign="top" height="100%" class="catalog">
                                                            <td width="15px" align="center" valign="middle">
                                                                <img alt="" src="../images/Head_images/index_style1.gif" />
                                                            </td>
                                                            <td width="155px" align="left" valign="middle">
                                                                <asp:HyperLink ID="hlkCatalog" runat="server" Target="_parent"></asp:HyperLink>
                                                            </td>
                                                            <td width="14px" align="left" valign="middle">
                                                                <img alt="" src="../images/Head_images/index_style2.gif" />
                                                                <asp:Label ID="lblCatalogName" runat="server" Text='<%# Eval("CatalogName")%>' Visible="False"> </asp:Label>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </h2>
                                            </span>
                                            <div class="h3_cat" id="div_h3" runat="server">
                                                <div class="shadow" id="shadow" runat="server">
                                                    <div class="shadow_border" id="shadow_border" runat="server">
                                                        <asp:DataList ID="dtCatalogTwo" runat="server" DataKeyField="CatalogNo" RepeatColumns="1"
                                                            RepeatDirection="Horizontal" RepeatLayout="Table" Width="655" BorderWidth="0px"
                                                            BackColor="white" GridLines="None" ShowHeader="false" CellPadding="0" OnItemDataBound="dtCatalogTwo_ItemDataBound">
                                                            <ItemTemplate>
                                                                <table cellspacing="0" cellpadding="0" border="0" width="655">
                                                                    <tr>
                                                                        <td valign="top">