한 번에 하나의 아코디언 만 여는 방법

Question

$('.accordion').on('click', '.accordion-control', function(e){ e.preventDefault(); $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

내 아코디언이 잘 작동합니다. 하지만 사용자가 한 번에 하나의 아코디언 만 열 수 있기를 바랍니다. 하나의 아코디언이 열려있을 때 사용자는 다른 아코디언을 열 수 없습니다. 이것은 간단한 Photoshop이며 다른 라이브러리 나 프레임 워크는 사용되지 않습니다. 1에는 내 html 파일의 일부도 포함되어 있습니다.

Answer 1

모두 닫고 사용자가 클릭 한 항목을 엽니 다.

$('.accordion-control').click(function(){ $(".accordion-panel").slideUp();
   $(this).next('.accordion-panel').slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>

        <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
        </li>
</ul>

이것은 관련이 있습니다. J. slideToggle 다른 열린 사업부 닫기

Answer 2

1 여기에 설명 된대로 규정 된 jQuery UI 마크 업으로 샘플 입력을 다시 작성 했습니다.https://api.jqueryui.com/accordion/#entry-examples

질문의 샘플 코드가 올바른 마크 업과 매우 가깝게 일치하지 않습니다.

아래 작업 예제에서 볼 수 있듯이 주어진 시간에 하나의 패널 만 열려 있으며, 이는 원하는 동작으로보고 한 것입니다. 위의 의견에서 언급했듯이 이는 기본 동작 이기도합니다 .

아래의 스 니펫을 실행하여 작동중인 버전을 확인하세요.

$("#accordion").accordion();

<link href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="accordion">
  <h3>Something 1</h3>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
  <h3>Something 2</h3>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</div>

Answer 3

열려있는 패널을 닫아야합니다.

$('.accordion').on('click', '.accordion-control', function(e) { e.preventDefault(); //Close Open panel $(this).closest(".accordion").find(".accordion-panel:visible").slideToggle();

  $(this)
    .next('.accordion-panel')
    .not(':animated')
    .slideToggle();
});

.accordion-panel {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="accordion">
  <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>

  <li>
    <button class="accordion-control">Something</button>
    <div class="accordion-panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </li>
</ul>