jQuery UI 아코디언은 여러 섹션을 열어두나요?

jQuery UI 아코디언은 여러 섹션을 열어두나요?

제가 바보일 수도 있지만, jQuery UI의 아코디언에서 여러 섹션을 열어두려면 어떻게 해야 합니까?데모는 모두 한 번에 하나만 열려 있습니다.접을 수 있는 메뉴형 시스템을 찾고 있습니다.

매우 간단합니다.

<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 문서에서 논의되었습니다.

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

아코디언은 두 개 이상의 콘텐츠 패널을 동시에 열 수 없으며 이를 위해서는 많은 노력이 필요합니다.둘 이상의 내용 패널을 열 수 있는 위젯을 찾고 있는 경우 이 위젯을 사용하지 마십시오.일반적으로 몇 줄의 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();
});

"나는 바보일 수도 있다" - 설명서를 읽지 않으면 바보가 아니지만, 문제가 있으면 해결책을 찾는 속도가 빨라집니다.

비슷한 스레드로 게시했지만 여기서도 관련이 있을 것이라고 생각했습니다.

jQuery-UI 아코디언의 단일 인스턴스로 이를 달성합니다.

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

예:

$('#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 아코디언과 모양이 같고 모든 탭\섹션을 열어둘 수 있는 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
});

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

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

단순: 클래스에 대한 아코디언을 활성화한 다음, 아코디언의 여러 인스턴스와 같이 이것으로 div를 만듭니다.

다음과 같이:

제이에스

$(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/

사실 한동안 인터넷에서 이것에 대한 해결책을 찾고 있었습니다.그리고 받아들여진 답은 "본문대로" 좋은 답을 줍니다.하지만 저는 그것을 받아들이고 싶지 않아서 계속 검색해 보니 다음과 같습니다.

http://jsbin.com/eqape/1601/edit - 실시간 예제

이 예에서는 적절한 스타일을 선택하고 동시에 요청된 기능을 추가하며, 각 헤더 클릭 시 자체 기능을 추가할 수 있는 공간을 제공합니다.또한 여러 개의 div가 "h3"s 사이에 있을 수 있습니다.

 $("#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>

단순하게, 다음과 같이 하나의 앵커 태그를 나타내는 여러 아코디언 디바를 만듭니다.

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

마크업이 추가됩니다.하지만 전문가처럼...

아코디언의 각 부분을 아코디언이라고 부릅니다.active: n은 첫 번째 항목에서는 0이 되고 나머지 항목에서는 1, 2, 3, 4 등이 됩니다.각각의 아코디언이기 때문에, 그들은 하나의 섹션만 가질 것이고, 나머지는 접어서 시작할 것입니다.

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

더 간단한 것은 각 리트의 클래스 속성에 레이블을 지정하고 각 리트를 루프하여 아코디언을 초기화하는 jquery를 갖는 것입니다.

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/

openjquery-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 UI에 대해 구체적으로 묻는 것으로 알고 있습니다.

저는 항상 jQuery UI 아코디언을 탐색하고 기본적으로 동일한 유형의 기능을 구현하기 위해 (IE11을 제외한) 기본 DETALS 및 SUMMARY 요소를 사용할 수 있다는 것을 기억합니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

당신이 나처럼 자주 잊어버릴까봐 상기시켜주는 겁니다.

언급URL : https://stackoverflow.com/questions/3479447/jquery-ui-accordion-that-keeps-multiple-sections-open