Birden fazla bölümü açık tutan jQuery UI akordiyonu?

Aptal olabilirim ama jQuery kullanıcı arayüzünün akordeonundaki birden fazla bölümü nasıl açık tutarsınız? Demoların hepsinde aynı anda yalnızca bir tane açık ... Daraltılabilir bir menü tipi sistemi arıyorum.

Bu , başlangıçta Accordion için jQuery UI belgelerinde tartışılmıştır :

NOT: Aynı anda birden fazla bölümün açılmasını istiyorsanız, akordeon kullanmayın

Bir akordeon, aynı anda birden fazla içerik panelinin açılmasına izin vermez ve bunu yapmak çok çaba gerektirir. Birden fazla içerik panelinin açılmasına izin veren bir widget arıyorsanız, bunu kullanmayın. Genellikle bunun yerine birkaç satır jQuery ile yazılabilir, bunun gibi bir şey:

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

Veya animasyonlu:

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

"Aptal olabilirim" - Belgeleri okumazsanız aptal değilsiniz, ancak sorun yaşıyorsanız, genellikle bir çözüm bulmayı hızlandırır.

Oldukça basit:

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

Bunu benzer bir başlıkta yayınladı, ancak burada da alakalı olabileceğini düşündüm.

Bunu tek bir jQuery-UI Accordion örneğiyle başarmak

Diğerlerinin de belirttiği gibi, Accordionparçacığın bunu doğrudan yapmak için bir API seçeneği yoktur. Bununla birlikte, herhangi bir nedenle pencere öğesini kullanmanız gerekiyorsa (örneğin, mevcut bir sistemi sürdürüyorsanız), beforeActivatepencere aracının varsayılan davranışını tersine çevirmek ve taklit etmek için olay işleyici seçeneğini kullanarak bunu başarmak mümkündür .

Örneğin:

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

Bir jsFiddle demosuna bakın

Veya daha mı basit?

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

Aynı jQuery UI Accordion görünümüne sahip ve tüm sekmeleri \ bölümleri açık tutabilen bir jQuery eklentisi yaptım

onu burada bulabilirsin

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

aynı işaretlemeyle çalışır

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

Javascript kodu

$(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
});

GÜNCELLEME: eklenti, varsayılan etkin sekmeler seçeneğini destekleyecek şekilde güncellendi

GÜNCELLEME: Bu eklenti artık kullanımdan kaldırılmıştır.

Aslında bir süredir internette buna bir çözüm arıyordu. Ve kabul edilen cevap, iyi "kitaba göre" cevabı verir. Ama bunu kabul etmek istemedim, bu yüzden aramaya devam ettim ve şunu buldum:

http://jsbin.com/eqape/1601/edit - Canlı Örnek

Bu örnek, uygun stilleri çeker ve aynı zamanda istenen işlevselliği ekler, her başlık tıklamasında kendi işlevselliğinizi eklemek için boşlukla tamamlanır. Ayrıca birden çok div'in "h3" ler arasında olmasına izin verir.

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

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

Zor bir çözüm buldum. Aynı işlevi iki kez ama farklı id ile çağıralım.

JQuery Kodu

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

HTML Kodu

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

Basittir, her biri aşağıdaki gibi bir bağlantı etiketini temsil eden birden fazla akordiyon div oluşturun:

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

Bazı işaretlemeler ekler. Ama bir profesyonel gibi çalışır ...

Basit: akordeonu bir sınıfa etkinleştirin ve ardından bununla çoklu akordeon örnekleri gibi div'ler oluşturun.

Bunun gibi:

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/

Akordeonun her bir bölümünü kendi akordeonları olarak adlandırmanız yeterli. aktif: n, birincisi için 0 (bu yüzden görüntülenecektir) ve geri kalanı için 1, 2, 3, 4 vb. olacaktır. Her biri kendi akordiyonu olduğundan, hepsinde sadece 1 bölüm olacak ve geri kalanı başlamak için daraltılacak.

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

Daha da basit, her li etiketinin sınıf özniteliğinde etiketlenmiş olması ve akordeonu başlatmak için her bir li üzerinden döngü yapmak için jquery'ye sahip olması.

JQuery-UI akordiyonu olmadan, bunu basitçe yapabilirsiniz:

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

Ve js

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

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

jquery-ui'yi açın - *. js

bulmak $.widget( "ui.accordion", {

bulmak _eventHandler: function( event ) {içinde

değişiklik

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

-e

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

önce active.removeClass( "ui-accordion-header-active ui-state-active" );

ekle if (typeof(active) !== 'undefined') {ve kapat}

zevk almak

Sadece her () işlevi jquery kullanırsınız;

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