jquery - 禁用基础 Accordion 的可点击性

Question

我有一个像这样的基础 Accordion 。

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

我在 accordion1 和 accordion2 中有几种形式。填写并验证表格后。我继续第 3 步。 此时我想禁用 accordion1 和 accordion2 的可点击性。它们应该不再可扩展。

现在我尝试删除几个类并删除它们的 ID。但这是行不通的。有什么办法可以禁止它们扩展。基础 Accordion 文档没有具体说明如何实现这一点。

要在单击按钮时展开和压缩 Accordion ，我会这样做:

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

现在有什么方法可以通过单击按钮来禁用 Accordion 。我尝试删除相应的 <a> dom 中的元素，但这会删除整个 Accordion 。

Answer 1

Working fiddle

您只需添加一个类来标识要禁用的步骤，在我的示例中，我将添加 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');
});

希望这对您有所帮助。

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