jquery - Einstürzen / Ausbau divs?

StackOverflow https://stackoverflow.com/questions/1552572

Frage

Der Versuch, zusammenklappbar / erweiterbar divs erstellen jQuery verwenden, aber es funktioniert nicht für mich überhaupt ... sollte jeder h3 Aufklappen / Zuklappen den div darunter, und ich bin nicht sicher, warum dies nicht funktioniert ... Zugegeben, is eine stark verschachtelte div, aber ich dachte, dass das Skript unter der uforms Klasse, unabhängig davon, wie viel andere Markup ist auf der Seite, wenn es lädt und dann tun, was es tun soll finden würde .. .

Hier ist die 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');
        });
});

Und das Markup (minus all die Dinge, die tatsächlich in der <div></div> ist, weil es eine Menge Form Zeug ...) 

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

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

  <h3>Heading</h3>
  <div></div>
</div>
War es hilfreich?

Lösung

Ich denke, diese ist das, was Sie versuchen, zu achive

ich den jQueryUI Rahmen sehr empfehlen. 

<!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>

Andere Tipps

Sie sind Selektoren sind einfach falsch. Sie haben nicht eq oder gt

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

Ich würde die Klasse zu etwas allgemeinere identifiziert ändern, so dass Sie diese in anderen Orten wiederverwenden können. 

<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>

Auch andere haben vorgeschlagen, dass Sie nur jQueryUI verwenden, die vollständig gültig ist, es sei denn, Sie nicht bereits es mit oder der Absicht, für zusätzliche Funktionen zu nutzen. Eine s3 Linie Funktion schlägt mit einer zusätzlich 32K-Bibliothek (die Größe der minimal notwendigen Komponenten in einer angepassten Build).

Ich verwende nur das Akkordeon-Widget mit nur einem div innen. 

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

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

Fügen Sie diese CSS-Link: 

link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top