无法在我的 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> </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>
我不知道我是否做错了什么,任何人都可以对此有所了解吗?
提前致谢。
最佳答案
在 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> </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>
关于c# - Jquery UI - asp.net 上的 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19300931/