jQuery- 붕괴 / DIV 확장?

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

문제

jQuery를 사용하여 접을 수있는 / 확장 가능한 div를 만들려고하지만 전혀 작동하지 않습니다 ... 각 H3는 그 아래의 div를 확장 / 붕괴시켜야합니다. 왜 이것이 작동하지 않는지 확실하지 않습니다. ~이다 심하게 중첩 된 div이지만 아래의 스크립트는로드 할 때 페이지에 다른 마크 업이 얼마나 많은지에 관계없이 UFFORS 클래스를 찾을 것이라고 생각했습니다.

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

그리고 마크 업 (실제로 내부에있는 모든 것들을 빼고 <div></div>, 그것은 많은 형태의 물건이기 때문에 ...) 

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

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

  <h3>Heading</h3>
  <div></div>
</div>
도움이 되었습니까?

해결책

제 생각에는 이것 당신이 성취하려는 것입니다

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>

다른 팁

당신은 셀렉터가 틀렸다. 당신은 필요하지 않습니다 eq 또는 gt

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

나는 더 일반적인 것으로 식별 된 수업을 변경하여 다른 장소에서 이것을 재사용 할 수 있습니다.

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

또한 다른 사람들은 당신이 아직 사용하지 않는 한 JQueryui를 사용한다고 제안했습니다. 또는 추가 기능에 사용하려고합니다. S3 라인 함수는 추가 32K 라이브러리 (맞춤형 빌드에서 최소 필요한 구성 요소의 크기)를 포함하여 비트를 비 웁니다.

나는 단지 하나의 아코디언 위젯을 사용합니다 div 내부에.

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

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

이 CSS 링크 포함 :

link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top