根据单选按钮选择折叠卡片

Question

我有这个 .cshtml 页面，我只是在其中添加一个功能。基于单选按钮选择，卡片应折叠。所以基本上如果现有用户选择然后collapseone打开，如果新用户选择collapsetwo打开。我什至想看看如何水平对齐两张卡。让我添加 sn-ps 和图像。

<div class="login-box align-content-center">

    <div class="login-logo">
        <a href=""><b>Registration</b></a>
    </div>
    <div class="card" style="width: 600px">
        <div class="card-body login-card-body">
            <p class="login-box-msg"></p>
            <div class="card-header">
                <h3 class="card-title">Select User Type</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group clearfix">
                            <div class="icheck-primary d-inline">
                                <input type="radio" id="radioPrimary1" name="r1" checked>
                                <label for="radioPrimary1">
                                    Existing User
                                </label>
                            </div>

                            <div class="icheck-primary d-inline">
                                <input type="radio" id="radioPrimary2" name="r1">
                                <label for="radioPrimary2">
                                    New User
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <form action="~/Home/Index" method="post">
                <section class="content">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="card card-primary" id="collapsetwo">
                                <div class="card-header">
                                    <h3 class="card-title">Existing Company</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">

                                    <div class="form-group">
                                        <label for="inputCompanyList">Company List</label>
                                        <select id="inputCompanyList" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>Company1</option>
                                            <option>Company2</option>
                                            <option>Company3</option>
                                        </select>

                                    </div>

                                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                </div>
                                <!-- /.card-body -->
                            </div>
                            <!-- /.card -->
                            <div class="card card-secondary" id="collapsetwo">
                                <div class="card-header">
                                    <h3 class="card-title">Register</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body">
                                    <div class="form-group">
                                        <label for="inputName">Company Name</label>
                                        <input type="text" id="inputName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputDescription">Zip</label>
                                        <input type="text" id="inputZip" class="form-control">
                                    </div>


                                    <div class="form-group">
                                        <label for="inputCountry">Country</label>
                                        <select id="inputCountry" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>India</option>
                                            <option>Malaysia</option>
                                            <option>Germany</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputCity">City</label>
                                        <select id="inputCity" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>Bangalore</option>
                                            <option>Delhi</option>
                                            <option>Mumbai</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Search</button>

                                </div>
                                <!-- /.card-body -->
                            </div>

                        </div>


                    </div>

                </section>

            </form>
        </div>

    </div>

    <!--Register Card-->


</div>

一些快照： 电流输出：

预期输出：

基于单选按钮选择的折叠。谢谢你的帮助！！

Answer 1

你可以尝试在card1和card2之外分别添加<div class="col-sm-6">，这样就可以将两张卡片水平对齐。并且可以使用js打开collapses。这里有一个demo：

html:

<div class="login-box align-content-center">

    <div class="login-logo">
        <a href=""><b>Registration</b></a>
    </div>
    <div class="card" style="width: 600px">
        <div class="card-body login-card-body">
            <p class="login-box-msg"></p>
            <div class="card-header">
                <h3 class="card-title">Select User Type</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="form-group clearfix">
                            <div class="icheck-primary d-inline">
                                <input type="radio" id="radioPrimary1" name="r1" checked onchange="show(this)">
                                <label for="radioPrimary1">
                                    Existing User
                                </label>
                            </div>

                            <div class="icheck-primary d-inline">
                                <input type="radio" id="radioPrimary2" name="r1" onchange="show(this)">
                                <label for="radioPrimary2">
                                    New User
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <form action="~/Home/Index" method="post">
                <section class="content">
                    <div class="row">
                        <div class="col-sm-6">
                            <div class="card card-primary" id="collapsetwo">
                                <div class="card-header">
                                    <h3 class="card-title">Existing Company</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body collapse show" id="collapse1">

                                    <div class="form-group">
                                        <label for="inputCompanyList">Company List</label>
                                        <select id="inputCompanyList" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>Company1</option>
                                            <option>Company2</option>
                                            <option>Company3</option>
                                        </select>

                                    </div>

                                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                                </div>
                                <!-- /.card-body -->
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <!-- /.card -->
                            <div class="card card-secondary" id="collapsetwo">
                                <div class="card-header">
                                    <h3 class="card-title">Register</h3>

                                    <div class="card-tools">
                                        <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                                            <i class="fas fa-minus"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body collapse" id="collapse2">
                                    <div class="form-group">
                                        <label for="inputName">Company Name</label>
                                        <input type="text" id="inputName" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label for="inputDescription">Zip</label>
                                        <input type="text" id="inputZip" class="form-control">
                                    </div>


                                    <div class="form-group">
                                        <label for="inputCountry">Country</label>
                                        <select id="inputCountry" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>India</option>
                                            <option>Malaysia</option>
                                            <option>Germany</option>
                                        </select>
                                    </div>

                                    <div class="form-group">
                                        <label for="inputCity">City</label>
                                        <select id="inputCity" class="form-control custom-select">
                                            <option selected disabled>Select one</option>
                                            <option>Bangalore</option>
                                            <option>Delhi</option>
                                            <option>Mumbai</option>
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Search</button>

                                </div>
                                <!-- /.card-body -->
                            </div>
                        
                        </div>


                    </div>

                </section>

            </form>
        </div>

    </div>

    <!--Register Card-->


</div>

js:

<script>
        
        function show(radio) {
            if ($(radio).is(':checked')) {
                if ($(radio).attr("id") == "radioPrimary1") {
                    $("#collapse1").addClass("show");
                    $("#collapse2").removeClass("show");

                } else {
                    $("#collapse1").removeClass("show");
                    $("#collapse2").addClass("show");
                }
            }
        }
        
    </script>

结果：