禁用基礎手風琴上的可點擊性

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。但那不起作用。有什麼辦法可以禁止他們擴大。基礎手風琴文件沒有具體說明如何實現這一點。

擴大和壓縮在一個按鈕的點擊accorions，我做這樣的事情：

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

聲明：在我的設置中，用戶無法切換手風琴的'上'或用鍵控制手風琴。如果您的解決方案確實如此，那麼您可能還需要在基礎庫的其他部分添加此檢查。