jquery - Colapsar/expandir divs? - Excelente biblioteca

Intentando crear divisiones plegables/expandibles usando jQuery, pero no funciona para nada ... Cada h3 debe expandir/colapsar el div debajo de él, y no estoy seguro de por qué esto no está funcionando ... Concedido , es un div fuertemente jerarquizada, pero me pareció que el guión a continuación encontraría la clase uforms independientemente de la cantidad de otras marcas es en la página cuando y carga a continuación, hacer lo que se supone que debe hacer ...jquery - Colapsar/expandir divs?

Aquí es el jQuery:

$(document).ready(function() { 
     $('div.uforms:eq(1)> div:gt(-1)').hide(); 
     $('div.uforms:eq(1)> h3').click(function() { 
       $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast'); 
     }); 
});

Y, el margen de beneficio (menos todas las cosas que en realidad dentro de la <div></div>, porque es una forma mucho material ...)

<div class="uforms"> 
    <h3>Heading</h3> 
    <div></div> 

    <h3>Heading</h3> 
    <div></div> 

    <h3>Heading</h3> 
    <div></div> 
</div>

Fuente

2009-10-12 n00b0101

Cuál es el punto de: GT (-1) y cuáles son sus intenciones con: eq (1)? Es extraño ver eso. – Ricky

creo this es lo que usted está tratando de achive

le recomiendo el marco jQueryUI.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>jQuery UI Accordion - Default functionality</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
    <script> 
    $(function() { 
    $("#accordion").accordion(); 
    }); 
    </script> 
</head> 
<body> 

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p> 
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer 
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit 
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut 
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. 
    </p> 
    </div> 
    <h3>Section 2</h3> 
    <div> 
    <p> 
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet 
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor 
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In 
    suscipit faucibus urna. 
    </p> 
    </div> 
    <h3>Section 3</h3> 
    <div> 
    <p> 
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. 
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero 
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis 
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. 
    </p> 
    <ul> 
     <li>List item one</li> 
     <li>List item two</li> 
     <li>List item three</li> 
    </ul> 
    </div> 
    <h3>Section 4</h3> 
    <div> 
    <p> 
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus 
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in 
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia 
    mauris vel est. 
    </p> 
    <p> 
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
    inceptos himenaeos. 
    </p> 
    </div> 
</div> 


</body> 
</html>

Fuente

2009-10-12 03:38:23

De acuerdo, no tiene sentido reinventar la rueda, solo reutilizar la de otra persona;) – wiifm

+10

* Excepto * si no está usando jQueryUI, entonces está agregando un mínimo de 32k (usando una compilación personalizada) solo para una acordeón. –

Sus selectores están equivocados. No es necesario eq o gt

$(document).ready(function() { 
    $('.accordion > div').hide(); 
    $('.accordion> h3').click(function() { 
     $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast'); 
    }); 
});

que cambiaría la clase identificada a algo más general para que pueda volver a utilizar esto en otros lugares.

<div class="accordion"> 
    <h3>Heading</h3> 
    <div>cactuspants! <div>I am an inner div</div></div> 

    <h3>Heading</h3> 
    <div>Hats</div> 

    <h3>Heading</h3> 
    <div>Hi!</div> 
</div>

Además, otros han sugerido que sólo tiene que utilizar jQueryUI, que es completamente válido, a menos que usted no está utilizando ya que o la intención de usarlo para funciones adicionales. Una función de la línea s3 supera una biblioteca adicional de 32K (el tamaño de los componentes mínimamente necesarios en una compilación personalizada).

Fuente

2009-10-12 06:08:37

Acabo de usar el widget de acordeón con solo div dentro.

$("#accordion").accordion({ 
    active: false, 
    collapsible: true 
}); 

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div> 
    <p>test 1 2 3</p> 
    </div> 
</div>

Incluir este enlace css:

link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"

Fuente

2013-08-26 20:07:21 twilliams

jquery - Colapsar/expandir divs?

Respuesta

Cuestiones relacionadas