jquery - Kollabiert / Expandiert divs?

Versuchen, zu erstellen zusammenklappbar /erweiterbar divs mit jQuery, aber es funktioniert nicht für mich überhaupt... Jeder, h3 sollte erweitern/reduzieren-das div darunter, und ich bin mir nicht sicher, warum dies nicht funktioniert... Zugegeben, ist einer stark verschachtelten div, aber ich dachte, dass das Skript unten finden würde, die uforms Klasse, unabhängig davon, wie viel andere markup-Code auf der Seite, wenn es lädt, und dann tun, was es tun soll...

Hier der 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 alle das Zeug, das eigentlich in die <div></div>, weil es eine Menge von form, Material...)

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

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

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

Was ist der Sinn von :gt(-1) und was sind Ihre Absichten mit :eq(1)? Merkwürdig, zu sehen, dass.

InformationsquelleAutor n00b0101 | 2009-10-12

Ich denke diese ist, was Sie versuchen zu erreichen

Empfehle ich das jQueryUI-framework.

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

Vereinbart, keinem Zeitpunkt das Rad neu erfinden möchte, nur re-verwenden Sie jemand anderes 😉
Außer wenn Sie nicht bereits mit jQueryUI, dann sind Sie hinzufügen von mindestens 32 Kb (mit einem custom build) nur für ein Akkordeon.

InformationsquelleAutor Ben Shelock

4

Du bist Selektoren sind einfach falsch. Sie brauchen nicht eq oder gt
```
$(document).ready(function () {
    $('.accordion > div').hide();
    $('.accordion> h3').click(function() {
        $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast');
    });
});
```
Ich würde ändern Sie die Klasse identifiziert, um etwas allgemeineres, so dass Sie wieder verwenden können, dies an anderen stellen.
```
<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 verwenden, jQueryUI, die vollständig gültig, es sei denn, Sie sind nicht bereits es oder beabsichtigen, es zu benutzen für zusätzliche Funktionen. Eine s3-Linie-Funktion-beats darunter einen neben der 32K-Bibliothek (die Größe der minimal notwendigen Komponenten in einem angepassten build).

InformationsquelleAutor Justin Johnson

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

Gehören diese css-link:

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

InformationsquelleAutor twilliams

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.