ファンデーションアコーディオンのクリック性を無効にする

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と組み合わせて使用​​しています。これは、initではなく各ユーザーの対話で無効化チェックを行う必要があります。

最初の手順は、無効にする必要があるli.accordion-itemにcssクラス 'disabled'を追加することです。

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

免責事項：私の設定では、ユーザーはアコーディオンを「上に」切り替えたり、アコーディオンをキーで制御することができません。あなたのソリューションがそうであれば、あなたは基礎ライブラリの他のいくつかのセクションでこのチェックを追加する必要があります。