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

问题描述：

<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>元素，但是删除了整个手风琴。

你目前有什么作为你的JavaScript？仅基于HTML很难排除故障。 – Toby

假设我在accordion3中有一个按钮，onClick按钮我称之为禁用前两个手风琴accordion1和accordion2的功能。 – nitte93user3232918

我的意思是将你的相关JS添加到你的问题中 - 如果你展示你的尝试并显示哪些代码已经工作，哪些没有工作，你将更有可能得到答案。 – Toby

答

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>

感谢您的回答，我喜欢你的方法。你的回答并不完全是我所需要的，我认为有这样一种更通用的方法，我希望在很多地方使用这种禁用动作，例如，只有当第一手风琴中的表单有效时，其他两个表单才能被禁用。点击前两个不应该压缩我已经开放的第3手风琴。但是我喜欢你的方法，你的方法让我想出一个想法来绕过我的情况。我想我可以用它来解决我的问题。再一次感谢您的回应。 – nitte93user3232918

Hi @Zakaria Acharki。你能告诉我如何把我的反应组件中的切换手风琴听众？ – nitte93user3232918

我做\t \t'$的addEventListener（ '切换 '函数（事件，手风琴）{ \t \t \t的console.log（ '喜'）; \t \t}）;（' 手风琴。'）。'但这是行不通的，另外，如何在组件安装时将禁用的类添加到我的组件中。 – nitte93user3232918

答

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

我将此解决方案与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 
])

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

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

相关推荐