Dezaktywować klikalność na akordeonie podstawowym

Question

Mam akordeon fundamentowy podobny do tego.

<ul class="accordion" data-accordion> 
    <li class="accordion-navigation"> 
    <a href="#panel1a">Accordion 1</a> 
    <div id="panel1a" class="content active"> 
     Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
    </div> 
    </li> 
    <li class="accordion-navigation"> 
    <a href="#panel2a">Accordion 2</a> 
    <div id="panel2a" class="content"> 
     Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
    </div> 
    </li> 
    <li class="accordion-navigation"> 
    <a href="#panel3a">Accordion 3</a> 
    <div id="panel3a" class="content"> 
     Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing 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. 
    </div> 
    </li> 
</ul> 

Mam kilka formularzy w accordion1 i accordion2. Po wypełnieniu i zatwierdzeniu formularzy. Przechodzę do kroku 3. W tym momencie chcę wyłączyć klikalność na akordeonie1 i akordeonie2. Nie powinny już być rozwijane.

Teraz próbowałem usunąć kilka klas i usunąć ich identyfikatory. Ale to nie działa. Czy jest jakiś sposób, abym mógł je wyłączyć z rozszerzenia. Dokument akordeonu fundacji nie precyzuje, jak to osiągnąć.

Aby rozwinąć i skompresować accorions na kliknięcie przycisku, zrobić coś takiego:

var parent = document.getElementById('collapse3').parentElement; 
var parentFoo = new Foundation.Accordion($(parent)); 
var previousFoo = new Foundation.Accordion($(parent.previousSibling)); 
parentFoo.down($('#'+parent.children[1].id)); 
previousFoo.up($('#'+parent.previousSibling.children[1].id)); 

Teraz jest jakiś sposób mogę wyłączyć akordeon na kliknięcie przycisku. Próbowałem usunąć odpowiedni element <a> z domu, ale to usuwa cały akordeon.

Answer 1

Working fiddle

Trzeba tylko dodać klasę do określenia czynności, które chcesz wyłączyć, w moim przykładzie dodam disabled Klasa:

$(document).foundation('accordion'); 

$('body').on('click', '#disable-steps', function(){ 
    $('.step-1,.step-2').addClass('disabled'); 
}) 

$('.accordion').on('toggled', function (event, accordion) { 
    if(accordion.parents('li').hasClass('disabled')) 
    accordion.removeClass('active'); 
}); 

nadzieję, że to pomaga.

$(document).foundation('accordion'); 
 

 
$('body').on('click', '#disable-steps', function(){ 
 
    $('.step-1,.step-2').addClass('disabled'); 
 
}) 
 

 
$('.accordion').on('toggled', function (event, accordion) { 
 
    if(accordion.parents('li').hasClass('disabled')) 
 
    accordion.removeClass('active'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/foundation/foundation.accordion.min.js"></script> 
 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> 
 

 
<ul class="accordion" data-accordion="myAccordionGroup"> 
 
    <li class="accordion-navigation step-1"> 
 
    <a href="#panel1c">Step 1</a> 
 
    <div id="panel1c" class="content"> 
 
     Panel 1. Lorem ipsum dolor 
 
    </div> 
 
    </li> 
 
    <li class="accordion-navigation step-2"> 
 
    <a href="#panel2c">Step 2</a> 
 
    <div id="panel2c" class="content"> 
 
     Panel 2. Lorem ipsum dolor 
 
    </div> 
 
    </li> 
 
    <li class="accordion-navigation step-3"> 
 
    <a href="#panel3c">Step 3</a> 
 
    <div id="panel3c" class="content"> 
 
     Panel 3. 
 
     <br> 
 
     <button type='button' id='disable-steps'>Disable steps 1 & 2</button> 
 
    </div> 
 
    </li> 
 
</ul>

Answer 2

chciałbym również, aby móc wyłączyć elementy akordeon, ale nie był w stanie znaleźć oficjalny sposób to zrobić. Z prostą edycją biblioteki fundamentów (wiem, że to nie jest idealne ...) jednak udało mi się to zrobić.

Używam tego rozwiązania w połączeniu z AngularJS, co wymaga wyłączenia sprawdzania w każdej interakcji użytkownika zamiast na init.

Pierwszym krokiem jest dodanie klasy css "wyłączone" do pozycji li.accordion, które należy wyłączyć.

<ul class="accordion" data-accordion="true" role="tablist"> 
    <li class="accordion-item disabled"> 
     <!-- The tab title needs role="tab", an href, a unique ID, and aria-controls. --> 
     <a href="#panel7d" role="tab" class="accordion-title" id="panel7d-heading" aria-controls="panel7d">Panel title</a> 
     <!-- The content pane needs an ID that matches the above href, role="tabpanel", data-tab-content, and aria-labelledby. --> 
     <div id="panel7d" class="accordion-content" role="tabpanel" data-tab-content="true" aria-labelledby="panel7d-heading"> 
      <!-- tab content --> 
     </div> 
    </li> 
</ul> 

Następnie prosta modyfikacja biblioteki foundation.js wystarcza do wyłączenia elementu karuzeli.

_createClass(Accordion, [ 
    // Other functions 
    { 
     key : 'down', 
     value : function down($target, firstTime) { 
      var _this2 = this; 

      // ADD THIS CHECK TO BE ABLE TO DISABLE THE ACCORDION ITEM 
      // Check if the parent accordion-item is disabled. If so, return from this function. 
      if ($target.parent().hasClass('disabled')) { 
       return; 
      } 

      // The rest of the function body 
     } 
    } 
    // Other functions 
]) 

Nota prawna: W moim ustawieniu użytkownik nie jest w stanie przełączać akordeonu "w górę" ani kontrolować akordeonu za pomocą klawiszy. Jeśli Twoje rozwiązanie działa, możesz potrzebować dodać tę kontrolę także w innych sekcjach biblioteki podstawowej.