Accordion用法

View Code
<%@ Page Language="C#"  MasterPageFile="~/site.master" AutoEventWireup="true" CodeFile="TaskTest.aspx.cs" Inherits="TaskTest" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" runat="server" ContentPlaceHolderID =ContentPlaceHolder1>

 
<style type="text/css">
        #menu ul
{
            padding
: 0px;
            margin
: 0px;
            text-align
: left;
            list-style-type
:none
            
}
        #menu li
{
            padding
: 0px;
            margin
: 0px;
            text-align
: left;
            list-style-type
:none
            
}
            
        .submenu
        
{
            line-height
:20px;
            border
:solid 1px red;
            text-align
:center;
            font-size
:14px;
            width
:111px;
        
}
    
</style>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<div class="main">
<div class="left">
<asp:UpdatePanel ID="upMenu" runat="server" UpdateMode="Conditional">
        
<ContentTemplate>
            
<cc1:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                HeaderSelectedCssClass
="accordionHeaderSelected" ContentCssClass="accordionContent"
                FadeTransitions
="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"
                RequireOpenedPane
="false" SuppressHeaderPostbacks="true">
                
<Panes>
                    
<cc1:AccordionPane ID="AccordionPane1" runat="server">
                        
<Header>
                            
<href="javascript:;" class="accordionLink"><div class="leftTitle"> 菜单列表一 </div></a></Header>
                        
<Content>
                            
<ul>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton1" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton2" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton3" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton4" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></li>
                            
</ul>
                        
</Content>
                    
</cc1:AccordionPane>
                    
<cc1:AccordionPane ID="AccordionPane2" runat="server">
                        
<Header>
                            
<href="javascript:;" class="accordionLink"><div class="leftTitle">菜单列表二</div></a></Header>
                        
<Content>
                            
<div>
                                
<asp:LinkButton ID="LinkButton5" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></div>
                            
<div>
                                
<asp:LinkButton ID="LinkButton6" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></div>
                            
<div>
                                
<asp:LinkButton ID="LinkButton7" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></div>
                            
<div>
                                
<asp:LinkButton ID="LinkButton8" OnClick="MenuItem_Click" runat="server">LinkButton</asp:LinkButton></div>
                        
</Content>
                    
</cc1:AccordionPane>
                    
<cc1:AccordionPane ID="AccordionPane3" runat="server">
                        
<Header>
                            
<href="javascript:;" class="accordionLink"><div class="leftTitle">菜单列表三</div></a></Header>
                        
<Content>
                            
<ul>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton9" OnClick="MenuItem_Click" PostBackUrl="~/Default.aspx?menuid=1"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton10" OnClick="MenuItem_Click" PostBackUrl="~/Default.aspx?menuid=2"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton11" OnClick="MenuItem_Click" PostBackUrl="~/Default.aspx?menuid=3"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton12" OnClick="MenuItem_Click" PostBackUrl="~/Default.aspx?menuid=4"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                            
</ul>
                        
</Content>
                    
</cc1:AccordionPane>
                    
<cc1:AccordionPane ID="AccordionPane4" runat="server">
                        
<Header>
                            
<href="javascript:;" class="accordionLink"><div class="leftTitle">菜单列表四</div></a></Header>
                        
<Content>
                            
<ul>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton13" OnClick="MenuItem_Click" PostBackUrl="~/Default2.aspx?menuid=1"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton14" OnClick="MenuItem_Click" PostBackUrl="~/Default2.aspx?menuid=2"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                                
<li>
                                    
<asp:LinkButton ID="LinkButton15" OnClick="MenuItem_Click" PostBackUrl="~/Default2.aspx?menuid=3"
                                        runat
="server">LinkButton</asp:LinkButton></li>
                            
</ul>
                        
</Content>
                    
</cc1:AccordionPane>
                
</Panes>
            
</cc1:Accordion>
        
</ContentTemplate>
    
</asp:UpdatePanel>
</div>

<div class="right"></div>

</div>

</asp:Content>
-------长沙程序员技术交流QQ群:428755207-------
原文地址:https://www.cnblogs.com/qq4004229/p/1999679.html