c# - Jquery UI - asp.net 上的 Accordion

Question

无法在我的 asp.net 页面上使用来自 JqueryUI 的简单“ Accordion ”脚本 .aspx .

在这些情况下，我找不到关于 Accordion 的好的文档，只有简单的 html <p><h3><div> etc...

例如，这是我在 aspx 上的代码页:

<%@ Page Language="C#" MasterPageFile="~/Zulcon_ppal.Master" AutoEventWireup="true"    CodeBehind="EnvianosTuCurriculum.aspx.cs" Inherits="Grupo_Zulcon.EnvianosTuCurriculum" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
  heightStyle: "content"
});
});
</script>
<style type="text/css">
.curriculumContainer
{
width:90%;
color:#646464;
margin:30px auto;
}     and then more page specific css... </asp:Content>

然后我想尝试使用 <div> 中的标题但什么也没发生:

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div class="fixed-width-wrapper contentContainer">

<div style="padding:20px">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc; background-image:url('images/menuzulcon3.png'); height: 59px; width: 953px;" class="titulosGeneral";></div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Bachillerato</div>
  <div class="curriculumdivcompleto">
  <div id="accordion">
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Insti_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Año titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Años cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="cursados_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div>&nbsp;</div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Formación Superior</div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Nombre_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Titulo obtenido</div>
    <div style="margin-top:5px"><asp:TextBox ID="titulo_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq2">
    <div style="margin-top:10px" class="autenticacionTitulo">Año de titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq3">
    <div style="margin-top:10px" class="autenticacionTitulo">Semestres cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="Semestre_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
</div>
  </div>
    <div style="text-align:right; margin-top:20px"><asp:Button ID="Button3" runat="server" ValidationGroup="Curriculum" postbackurl="Envia4.aspx" OnClick="Register" CssClass="my_btn"/></div>
  </div>
  </div>

</asp:Content>

我不知道我是否做错了什么，任何人都可以对此有所了解吗？

提前致谢。

Answer 1

在 documentation 中找到这个页面，如果它是你要找的东西

Accordion 容器的标记需要成对的标题和内容面板:

<div id="accordion">
<h3>First header</h3>
<div>First content panel</div>
<h3>Second header</h3>
<div>Second content panel</div>
</div>

Accordion 支持任意标记，但每个内容面板必须始终是其关联标题之后的下一个兄弟。有关如何使用自定义标记结构的信息，请参阅 header 选项。

更新:

<div class="fixed-width-wrapper contentContainer">

<div style="padding:20px">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc; background-image:url('images/menuzulcon3.png'); height: 59px; width: 953px;" class="titulosGeneral";></div>
  <div class="curriculumdivcompleto">
  <div id="accordion">
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Bachillerato</div>
  <div>
    <div class="curriculumLadoRegistroizq">
      <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
      <div style="margin-top:5px"><asp:TextBox ID="Lugar_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistro2">
      <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
      <div style="margin-top:5px"><asp:TextBox ID="Insti_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistroizq">
      <div style="margin-top:10px" class="autenticacionTitulo">Año titulación</div>
      <div style="margin-top:5px"><asp:TextBox ID="año_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
    <div class="curriculumLadoRegistro2">
      <div style="margin-top:10px" class="autenticacionTitulo">Años cursados</div>
      <div style="margin-top:5px"><asp:TextBox ID="cursados_pri" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
    </div>
  </div>
  <div>&nbsp;</div>
  <div style="padding-bottom:5px; border-bottom:solid 1px #cccccc" class="titulosGeneral">Formación Superior</div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Lugar (Ciudad, Pais)</div>
    <div style="margin-top:5px"><asp:TextBox ID="Lugar_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistro2">
    <div style="margin-top:10px" class="autenticacionTitulo">Nombre de la Institución</div>
    <div style="margin-top:5px"><asp:TextBox ID="Nombre_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq">
    <div style="margin-top:10px" class="autenticacionTitulo">Titulo obtenido</div>
    <div style="margin-top:5px"><asp:TextBox ID="titulo_sec" runat="server" MaxLength="100" ValidationGroup="Curriculum" CssClass="autenticacionTextBox"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq2">
    <div style="margin-top:10px" class="autenticacionTitulo">Año de titulación</div>
    <div style="margin-top:5px"><asp:TextBox ID="año_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
  <div class="curriculumLadoRegistroizq3">
    <div style="margin-top:10px" class="autenticacionTitulo">Semestres cursados</div>
    <div style="margin-top:5px"><asp:TextBox ID="Semestre_sec" runat="server" MaxLength="25" ValidationGroup="Curriculum" CssClass="autenticacionTextBoxReducido"></asp:TextBox></div>
  </div>
</div>
  </div>
    <div style="text-align:right; margin-top:20px"><asp:Button ID="Button3" runat="server" ValidationGroup="Curriculum" postbackurl="Envia4.aspx" OnClick="Register" CssClass="my_btn"/></div>
  </div>
  </div>