Отключить кликабельность на базовом аккордеоне

Рабочая скрипта

Вам нужно просто добавить класс для определения шагов, которые вы хотите отключить, в моем примере я добавлю класс disabled:

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

Hope this helps.

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

Я также хотел бы иметь возможность отключать элементы аккордеона, но не смог найти официальный способ сделать это. Однако с помощью простого редактирования базовой библиотеки (я знаю, что это не идеально...) я смог сделать эту работу.

Я использую это решение в сочетании с AngularJS, который требует, чтобы отключенная проверка выполнялась при каждом взаимодействии с пользователем, а не при инициализации.

Первым шагом является добавление класса css «disabled» к элементам li.accordion, которые необходимо отключить.

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

Тогда достаточно простой модификации библиотеки Foundation.js, чтобы отключить элемент карусели.

_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
])

Отказ от ответственности: в моей настройке пользователь не может переключать аккордеон «вверх» или управлять аккордеоном с помощью клавиш. Если ваше решение это делает, вам может потребоваться добавить эту проверку и в некоторые другие разделы базовой библиотеки.