여러 섹션을 열어 두는 jQuery UI 아코디언?

나는 바보 일 수 있지만 jQuery UI의 아코디언에서 여러 섹션을 열어 두는 방법은 무엇입니까? 데모는 모두 한 번에 하나만 열립니다. 축소 가능한 메뉴 유형 시스템을 찾고 있습니다.

이것은 원래 Accordion 에 대한 jQuery UI 문서 에서 논의 되었습니다 .

참고 : 한 번에 여러 섹션을 열려면 아코디언을 사용하지 마십시오.

아코디언은 두 개 이상의 콘텐츠 패널을 동시에 열 수 없으며 그렇게하려면 많은 노력이 필요합니다. 둘 이상의 컨텐츠 패널을 열 수있는 위젯을 찾고 있다면 이것을 사용하지 마십시오. 일반적으로 다음과 같이 jQuery 몇 줄로 작성할 수 있습니다.

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle();
      return false;
  }).next().hide();
});

또는 애니메이션 :

jQuery(document).ready(function(){
  $('.accordion .head').click(function() {
      $(this).next().toggle('slow');
      return false;
  }).next().hide();
});

"나는 바보 일 수 있습니다"-문서를 읽지 않으면 바보가 아니지만 문제가있는 경우 일반적으로 해결책을 찾는 속도가 빨라집니다.

매우 간단합니다.

<script type="text/javascript">
    (function($) {
        $(function() {
            $("#accordion > div").accordion({ header: "h3", collapsible: true });
        })
    })(jQuery);
</script>

<div id="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

유사한 스레드에 게시했지만 여기에서도 관련이있을 수 있다고 생각했습니다.

jQuery-UI Accordion의 단일 인스턴스로이를 달성

다른 사람들이 언급했듯이 Accordion위젯에는이 작업을 직접 수행 할 수있는 API 옵션이 없습니다. 그러나 어떤 이유로 위젯 을 사용해야 하는 경우 (예 : 기존 시스템을 유지하고있는 beforeActivate경우) 이벤트 핸들러 옵션을 사용 하여 위젯의 기본 동작을 전복하고 에뮬레이션 하여이를 달성 할 수 있습니다 .

예를 들면 :

$('#accordion').accordion({
    collapsible:true,

    beforeActivate: function(event, ui) {
         // The accordion believes a panel is being opened
        if (ui.newHeader[0]) {
            var currHeader  = ui.newHeader;
            var currContent = currHeader.next('.ui-accordion-content');
         // The accordion believes a panel is being closed
        } else {
            var currHeader  = ui.oldHeader;
            var currContent = currHeader.next('.ui-accordion-content');
        }
         // Since we've changed the default behavior, this detects the actual status
        var isPanelSelected = currHeader.attr('aria-selected') == 'true';

         // Toggle the panel's header
        currHeader.toggleClass('ui-corner-all',isPanelSelected).toggleClass('accordion-header-active ui-state-active ui-corner-top',!isPanelSelected).attr('aria-selected',((!isPanelSelected).toString()));

        // Toggle the panel's icon
        currHeader.children('.ui-icon').toggleClass('ui-icon-triangle-1-e',isPanelSelected).toggleClass('ui-icon-triangle-1-s',!isPanelSelected);

         // Toggle the panel's content
        currContent.toggleClass('accordion-content-active',!isPanelSelected)    
        if (isPanelSelected) { currContent.slideUp(); }  else { currContent.slideDown(); }

        return false; // Cancels the default action
    }
});

참조 jsFiddle 데모

아니면 더 간단합니까?

<div class="accordion">
    <h3><a href="#">First</a></h3>
    <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
</div>    
<div class="accordion">
    <h3><a href="#">Second</a></h3>
    <div>Phasellus mattis tincidunt nibh.</div>
</div>         
<div class="accordion">
    <h3><a href="#">Third</a></h3>
    <div>Nam dui erat, auctor a, dignissim quis.</div>
</div>
<script type="text/javascript">
    $(".accordion").accordion({ collapsible: true, active: false });
</script>

jQuery UI Accordion과 동일한 모양의 jQuery 플러그인을 수행했으며 모든 탭 \ 섹션을 열어 둘 수 있습니다.

여기에서 찾을 수 있습니다

http://anasnakawa.wordpress.com/2011/01/25/jquery-ui-multi-open-accordion/

동일한 마크 업으로 작동

<div id="multiOpenAccordion">
        <h3><a href="#">tab 1</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
        <h3><a href="#">tab 2</a></h3>
        <div>Lorem ipsum dolor sit amet</div>
</div>

자바 스크립트 코드

$(function(){
        $('#multiOpenAccordion').multiAccordion();
       // you can use a number or an array with active option to specify which tabs to be opened by default:
       $('#multiOpenAccordion').multiAccordion({ active: 1 });
       // OR
       $('#multiOpenAccordion').multiAccordion({ active: [1, 2, 3] });

       $('#multiOpenAccordion').multiAccordion({ active: false }); // no opened tabs
});

업데이트 : 플러그인이 기본 활성 탭 옵션을 지원하도록 업데이트되었습니다.

업데이트 :이 플러그인은 이제 더 이상 사용되지 않습니다.

실제로 잠시 동안 이에 대한 해결책을 인터넷에서 검색하고있었습니다. 그리고 받아 들여진 대답은 좋은 "책에 의해"대답을줍니다. 그러나 나는 그것을 받아들이고 싶지 않았기 때문에 계속 검색하고 이것을 발견했습니다.

http://jsbin.com/eqape/1601/edit- 라이브 예제

이 예제는 적절한 스타일을 가져와 동시에 요청 된 기능을 추가하며 각 헤더 클릭에 대해 고유 한 기능을 추가 할 수있는 공간을 완성합니다. 또한 "h3"사이에 여러 div가있을 수 있습니다.

 $("#notaccordion").addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
  .find("h3")
    .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
    .hover(function() { $(this).toggleClass("ui-state-hover"); })
    .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
    .click(function() {
      $(this).find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()


        .next().toggleClass("ui-accordion-content-active").slideToggle();
        return false;
    })
    .next()
      .addClass("ui-accordion-content  ui-helper-reset ui-widget-content ui-corner-bottom")
      .hide();

HTML 코드 :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Toggle Panels (not accordion) using ui-accordion  styles</title>

<!-- jQuery UI  |  http://jquery.com/  http://jqueryui.com/  http://jqueryui.com/docs/Theming  -->
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


</head>
<body>

<h1>Toggle Panels</h1>
<div id="notaccordion">
  <h3><a href="#">Section 1</a></h3>
  <div class="content">
    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.
  </div>
  <h3><a href="#">Section 2</a></h3>
  <div>
    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.
  </div>
  <h3><a href="#">Section 3</a></h3>
  <div class="top">
  Top top top top
  </div>
  <div class="content">
    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.
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item  three</li>
    </ul>
  </div>
  <div class="bottom">
  Bottom bottom bottom bottom
  </div>
  <h3><a href="#">Section 4</a></h3>
  <div>
    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.
    Suspendisse eu nisl. Nullam ut libero. Integer  dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per  conubia nostra, per
    inceptos himenaeos.
  </div>
</div>

</body>
</html>`

까다로운 해결책을 찾았습니다. 동일한 함수를 두 번 호출하지만 다른 ID를 사용합니다.

JQuery 코드

$(function() {
    $( "#accordion1" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
    $( "#accordion2" ).accordion({
        collapsible: true, active: false, heightStyle: "content"
    });
});

HTML 코드

<div id="accordion1">
    <h3>Section 1</h3>
    <div>Section one Text</div>
</div>
<div id="accordion2">   
    <h3>Section 2</h3>
    <div>Section two Text</div>
</div>

간단하고 다음과 같이 각각 하나의 앵커 태그를 나타내는 여러 개의 accordian div를 만듭니다.

<div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
<div class="accordion">
<a href = "#">First heading</a>
</div>
</div>

일부 마크 업을 추가합니다. 하지만 프로처럼 작동합니다 ...

단순함 : 아코디언을 클래스에 활성화 한 다음 아코디언의 여러 인스턴스처럼 div를 만듭니다.

이렇게 :

JS

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

HTML

<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>
<div class="accordion">
    <h3>Title</h3>
    <p>lorem</p>
</div>

https://jsfiddle.net/sparhawk_odin/pm91whz3/

아코디언의 각 섹션을 자체 아코디언이라고 부르면됩니다. 활성 : n은 첫 번째 항목에 대해 0이되고 (따라서 표시됨) 나머지는 1, 2, 3, 4 등이됩니다. 각각은 자체 아코디언이므로 모두 1 개의 섹션 만 있고 나머지는 시작하기 위해 축소됩니다.

$('.accordian').each(function(n, el) {
  $(el).accordion({
    heightStyle: 'content',
    collapsible: true,
    active: n
  });
});

더 간단하게는 각 li 태그의 클래스 속성에 레이블을 지정하고 jquery가 각 li를 반복하여 아코디언을 초기화하도록합니다.

jQuery-UI 아코디언이 없으면 간단히 다음과 같이 할 수 있습니다.

<div class="section">
  <div class="section-title">
    Section 1
  </div>
  <div class="section-content">
    Section 1 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

<div class="section">
  <div class="section-title">
    Section 2
  </div>
  <div class="section-content">
    Section 2 Content: Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.
  </div>
</div>

그리고 js

$( ".section-title" ).click(function() {
    $(this).parent().find( ".section-content" ).slideToggle();
});

https://jsfiddle.net/gayan_dasanayake/6ogxL7nm/

jquery-ui-*. js 열기

찾기 $.widget( "ui.accordion", {

_eventHandler: function( event ) {내부 찾기

변화

var options = this.options,             active = this.active,           clicked = $( event.currentTarget ),             clickedIsActive = clicked[ 0 ] === active[ 0 ],             collapsing = clickedIsActive && options.collapsible,            toShow = collapsing ? $() : clicked.next(),             toHide = active.next(),             eventData = {
                oldHeader: active,
                oldPanel: toHide,
                newHeader: collapsing ? $() : clicked,
                newPanel: toShow            };

에

var options = this.options,
    clicked = $( event.currentTarget),
    clickedIsActive = clicked.next().attr('aria-expanded') == 'true',
    collapsing = clickedIsActive && options.collapsible;

    if (clickedIsActive == true) {
        var toShow = $();
        var toHide = clicked.next();
    } else {
        var toShow = clicked.next();
        var toHide = $();

    }
    eventData = {
        oldHeader: $(),
        oldPanel: toHide,
        newHeader: clicked,
        newPanel: toShow
    };

전에 active.removeClass( "ui-accordion-header-active ui-state-active" );

추가 if (typeof(active) !== 'undefined') {및 닫기}

즐겨

jquery each () 함수를 사용하면됩니다.

$(function() {
    $( ".selector_class_name" ).each(function(){
        $( this ).accordion({
          collapsible: true, 
          active:false,
          heightStyle: "content"
        });
    });
});