Question

我想在asp.net中创建一个水平和垂直的手风琴。

我使用了Ajax Toolkit Accordion，但无法改变其方向：

-------
-------
-------           created using ajax toolkit
-------




|||||
|||||            looking for this
|||||
|||||

Answer 1

试用Horizontal Accordion，一个jQuery插件。

Answer 2

这是ASP.NET（C＃）的一个工作示例

（用户控制）

<head>
    <title></title>
    <link href="/UserControls/Accordion/Css/Accordion.css" rel="Stylesheet" type="text/css" media="all" />
</head>

<asp:Table ID="AccordionTable" runat="server" CellPadding="0" CellSpacing="0" Width="100%">
    <asp:TableRow Width="100%" Height="200px">
        <%-- SLIDER 1 --%>
        <asp:TableCell CssClass="Border">
            <asp:Panel ID="Slide1Panel" runat="server" Style="display:block">
                <p>Panel 1 content.</p>
            </asp:Panel>
        </asp:TableCell>
        <asp:TableCell CssClass="Border" Width="20px">
            <asp:LinkButton ID="LinkButton_1" runat="server" Text="Header 1" CssClass="VerticalText" OnClick="Slide_Click" />
        </asp:TableCell>
        <%-- SLIDER 2 --%>
        <asp:TableCell CssClass="Border">
            <asp:Panel ID="Slide2Panel" runat="server" Style="display:none">
                <p>Panel 2 content.</p>
            </asp:Panel>
        </asp:TableCell>
        <asp:TableCell CssClass="Border" Width="20px">
            <asp:LinkButton ID="LinkButton_2" runat="server" Text="Header 2" CssClass="VerticalText" OnClick="Slide_Click" />
        </asp:TableCell>
        <%-- SLIDER 3 --%>
        <asp:TableCell CssClass="Border">
            <asp:Panel ID="Slide3Panel" runat="server" Style="display:none">
                <p>Panel 3 content.</p>
            </asp:Panel>
        </asp:TableCell>
        <asp:TableCell CssClass="Border" Width="20px">
            <asp:LinkButton ID="LinkButton_3" runat="server" Text="Header 3" CssClass="VerticalText" OnClick="Slide_Click" />
        </asp:TableCell>
    </asp:TableRow>
</asp:Table>

（代码背后）

protected void Page_Load(object sender, EventArgs e)
        {
        }

        protected void Slide_Click(object sender, EventArgs e)
        {
            ResetSlides();

            LinkButton linkButton = (LinkButton)sender;

            char[] separator = new char[] { '_' };
            string[] trigger = linkButton.ID.Split(separator);

            foreach (TableRow tblRow in AccordionTable.Rows)
            {
                int i = 1;
                foreach (TableCell tblCell in tblRow.Cells)
                {
                    if (i % 2 == 0)
                    {
                        // Dont touch our LinkButtons (!)
                    }
                    else
                    {
                        Panel slidePanel = (Panel)FindControl("Slide" + trigger[1] + "Panel");
                        if (slidePanel != null)
                        {
                            slidePanel.Style.Add("display", "block");
                            tblCell.Style.Remove("display");
                            tblCell.Style.Add("display", "block");
                        }
                    }
                    i++;
                }
            }
        }

        protected void ResetSlides()
        {
            foreach (TableRow tblRow in AccordionTable.Rows)
            {
                int i = 1;
                foreach (TableCell tblCell in tblRow.Cells)
                {
                    Panel slidePanel = (Panel)FindControl("Slide" + i + "Panel");
                    if (slidePanel != null)
                    {
                        tblCell.Style.Remove("display");
                        slidePanel.Style.Add("display", "none");
                    }
                    if (i % 2 == 0)
                    {
                        // Dont resize LinkButtons (!)
                    }
                    else
                    {
                        tblCell.Style.Remove("display");
                        tblCell.Style.Add("display", "none");
                    }
                    i++;
                }
            }
        }

（STYLESHEET（BASIC））

.VerticalText 
{ 
    writing-mode: tb-lr; 
    filter: flipV flipH; 
}

.Border
{
    border: solid 1px Black;
}

Answer 3

这两种解决方案对我都不起作用，因此提出了解决方案。完全不需要任何代码即可工作，因此您可以加载它并依靠用户刷新页面，也可以像我一样完成操作，在单击它们时放置一些updatepanel和update部分。

HTML

    <div class="Accordion-Container">
        <div class="Accordion-Header" onclick="resizeAccordion(this);">Header One</div>
        <div class="Accordion-Content">
            <asp:UpdatePanel ID="upOne" runat="server">
                <ContentTemplate>
                    Content One
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div class="Accordion-Header" onclick="resizeAccordion(this);">Header Two</div>
        <div class="Accordion-Content acSelected">
            <asp:UpdatePanel ID="upTwo" runat="server">
                <ContentTemplate>
                    Content Two
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div class="Accordion-Header" onclick="resizeAccordion(this);">Header Three</div>
        <div class="Accordion-Content">
            <asp:UpdatePanel ID="upThree" runat="server">
                <ContentTemplate>
                    Content Three
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
        <div class="Accordion-Header" onclick="resizeAccordion(this);">Header Four</div>
        <div class="Accordion-Content">
            <asp:UpdatePanel ID="upFour" runat="server">
                <ContentTemplate>
                    Content Four
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </div>

CSS

html, * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
        }

        .Accordion-Container {
            height: 300px;
            width: 100%;
            position: relative;
            background-color: #006;
            border: 4px solid #006;
            border-radius: 10px;
        }

        .Accordion-Container div {
            height: 100%;
            display: inline-block;
        }

        .Accordion-Header {
            background-color: #006;
            color: #fff;
            width: 30px;
            line-height: 30px;
            writing-mode: vertical-rl;
            transform: rotateZ(180deg);
            font-weight: bold;
            font-size: 1.6em;
            text-align: center;
            cursor: pointer;
        }

        .Accordion-Header:hover {
            background-image: radial-gradient(#009 10%, #006 80%);
        }

        .Accordion-Content {
            width: 0px;
            overflow: hidden;
            background-color: #fff;
            padding: 0;
            transition: width 400ms ease-in-out;
        }

        .acSelected {
            width: calc(100% - 148px); /* Need to adjust this to how many panels you have. 37px per panel */
            padding: 2px 4px;
        }

jQuery

        function resizeAccordion(el) {
            $('.acSelected').removeClass("acSelected");
            $(el).next('.Accordion-Content').addClass('acSelected');
        }

水平和垂直手风琴

3 个答案: