Question

我尝试制作登录/注册模式，但我无法在此模式中创建指向相应面板的链接。

按钮：

<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle activation-menu-cta" aria-expanded="false">Btn <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right-fix">
    <li><a id="panelOne" type="btn" data-toggle="modal" href="#myModal">panel one</a></li>
    <li><a id="panelTwo" type="btn" data-toggle="modal" href="#myModal">panel two</a></li>
</ul>

模态：

<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne">
                         <h4 class="panel-title">
                            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                panel one
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">text 1</div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo">
                         <h4 class="panel-title">
                            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                panel two
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">text 2</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/gmoefesr/1/

Answer 1

这可能会对你有帮助。

    $(document).ready(function () {
        $('.collapse').collapse();
        $('#panelOne').click(function () {
            $('#collapseOne').collapse('show');
            $('#collapseTwo').collapse('hide');
        });
        $('#panelTwo').click(function () {
            $('#collapseTwo').collapse('show');
            $('#collapseOne').collapse('hide');
        });
    });

http://jsbin.com/ropamajola/1/

Answer 2

从两个按钮中删除data-toggle="modal"属性，添加open-modal类，并在脚本部分设置.modal('show') method。

您还应该删除type="btn"，因为它不是锚点的正确属性。

使用bootstrap模态X.bs.modal事件可在模态打开时保持collapse动画可见。

HTML：

<li><a class="open-modal" href="#collapseOne">panel one</a></li>
<li><a class="open-modal" href="#collapseTwo">panel two</a></li>

JS：

var panelTarget;
$('#myModal').on('shown.bs.modal', function(){
    $(panelTarget).collapse('show');
});

$('.open-modal').click(function(){
    panelTarget = $(this).attr('href');
    $('.collapse.in').collapse('hide');
    $('#myModal').modal('show');
});

JSFiddle demo

如何通过单击链接打开引导模式内的特定可折叠面板

2 个答案: