禁用基础手风琴的可点击性

Question

我有一个像这样的基础手风琴.

<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.但这不起作用.有什么方法可以禁止他们扩展.基础手风琴doc没有具体说明如何实现这一点.

要点击按钮扩展和压缩比例,我会这样做:

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

现在有什么方法可以点击按钮禁用手风琴.我尝试<a>从dom中删除相应的元素,但这会移除整个手风琴.

Answer 1

工作小提琴

您只需添加一个类来标识要禁用的步骤，在我的示例中，我将添加disabledclass ：

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

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