使用 jQuery 显示/隐藏引导手风琴面板答案

【问题标题】：show/hide bootstrap accordion panel with jQuery使用 jQuery 显示/隐藏引导手风琴面板
【发布时间】：2014-09-24 20:19:55
【问题描述】：

我有一个引导手风琴。现在我只想在特定场景下启用panel。当我的一个面板有效时，只有另一个面板should be collapsible

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Collapsible Group
                    Item #1 </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <form id="myform" action="" method="post"> //when this form is valid, then open the collapseTwo panel
            <div class="panel-body">
                <input type="text" id="txtName" name="txtName" />
                <br />
                <input type="text" id="txtCountry" name="txtCountry" />
                <br />
                <input id="btn" type="submit" name="submit" value="Submit" />
                <br />
            </div>
            </form>
        </div>
    </div>
    <div id="clickMe" class="panel panel-default"> // this will remain closed unless the above form is not valid
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Collapsible Group
                    Item #2 </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                //Some data
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#myform").validate({
            rules: {
                txtName: {
                    required: true
                },
                txtCountry: {
                    required: true
                }
            }
        });

        $("#myform").valid();

        $('#clickMe').on('shown.bs.collapse', function (e) {     //i click on the panel header

            if ($('#myform').valid()) {   //now if the first panel(which contains form) is valid
               $('#collapseTwo').collapse('show');    //then show the clicked panel
            }
            else {
                $('#collapseTwo').collapse('hide');  //else always keep it hidden/locked
                alert('form invalid');
            }
        })
    });
</script>

Fiddle

这与它的实际运作方式并不接近。

collapseTwo 面板应该被锁定，并且应该显示一条警告消息，指出 collapseOne 面板无效。如果表单是有效的，那么它应该是折叠的默认行为。

【问题讨论】：

标签： javascript jquery twitter-bootstrap twitter-bootstrap-3 jquery-validate

【解决方案1】：

显示面板后您正在检查：

$('#clickMe').on('shown.bs.collapse', function (e) {

改为使用show 方法：

$('#clickMe').on('show.bs.collapse', function (e) {

还有其他事情正在发生，但这是一个开始。

更新：发现其他问题...无需强制折叠行为。只是在必要时阻止它。

if (!$('#myform').valid()) {
    return false;
}

Demo

【讨论】：

【解决方案2】：

使用默认的折叠方式显示和隐藏

展示

$("#collapseOne").collapse('show');

隐藏

$("#collapseOne").collapse('hide');

【讨论】：