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

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。但这是行不通的。有什么办法可以禁止它们扩展。基础手风琴文档没有具体说明如何实现这一点。

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

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

您只需添加一个 class 来标识您要禁用的步骤，在我的示例中，我将添加 disabled class :

$(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 class '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
])

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

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

Disable clickability on foundation accordion

css

jquery

accordion

zurb-foundation

zurb-foundation-6