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

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>

我在手风琴 1 和手风琴 2 中有几个表格。填写并验证表格后。我继续进行第 3 步。 此时我想禁用手风琴 1 和手风琴 2 的可点击性。它们应该不再是可扩展的。

现在我尝试删除几个类并删除它们的 id。但这行不通。有什么办法可以使它们无法扩展。基金会手风琴文档没有说明如何实现这一点。

要在单击按钮时展开和压缩手风琴，我会这样做：

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

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

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>

Answer 2

我也希望能够禁用手风琴项目，但无法找到正式的方法来做到这一点。通过对基础库的简单编辑（我知道这并不理想......）但是我能够完成这项工作。

我将此解决方案与 AngularJS 结合使用，这需要在每次用户交互时而不是在初始化时进行禁用检查。

第一步是将css类“禁用”添加到需要禁用的li.accordion-item中。

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

免责声明：在我的设置中，用户无法“向上”切换手风琴或使用按键控制手风琴。如果您的解决方案是这样，那么您可能还需要在基础库的其他一些部分中添加此检查。