Question

我有一个bootstrap 3手风琴我想在我的表单未经验证的情况下阻止X面板打开。到目前为止我有以下代码，但仍然无法让它停止打开

// Accordion 
    $('#accordion').on('shown.bs.collapse', function (e) {
        var id = $(e.target).prev().find("[id]")[0].id;
        var poNumber = s.splice(id, 0, 2);
        if (false === $('#bioForm').parsley().validate('PO' + poNumber-1)) {
           e.stopPropagation(); 
        } else {
            $('body').animate({
                scrollTop: $("#" + id).offset().top
            }, 1000);
        }

    });

这是HTML（只是第一个面板，其余部分相同）

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<!-- PO 1 -->
<div class="panel-heading" role="tab" id="heading1">
<a data-toggle="collapse" id="po1" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1">
<h4 class="panel-title"> PO #1
</h4>
</a>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="form-group">
</div>
</div>
 </div>
</div>
 <!-- PO 1 END -->

Answer 1

向切换href添加点击事件。我们必须在崩溃事件之前假设这种情况发生，因此可以停止传播。见http://jsfiddle.net/xwhes56a/1

var valid = false;

$(function() {
  $('a[data-toggle]').on('click', function(e) {
    // Panel that is currently open
    var panel = $('div.in');
    if (! valid) {
      alert('Sorry panel ' + panel[0].id + ' not validated');
      e.stopPropagation();
    }
  });
});

Answer 2

这个怎么样：

if (false === $('#bioForm').parsley().validate('PO' + poNumber-1)) {
   $(this).collapse();
}

按照＆＃34;通过Javascript＆＃34; Bootstrap documentation

的部分

Bootstrap 3折叠手风琴停止/禁用打开spefifc面板

2 个答案: