Question

我正在尝试在我的某个网页中添加Panel Collapse功能。如何使用带有向上和向下箭头的Bootstrap添加相同的内容

Answer 1

<style>
.clickable {
 cursor: pointer;
}

.panel-heading span {
 margin-top: -20px;
}
</style>

<script>
    $(document).ready(function() {
        $('#myTable').DataTable();
    });

    $(document).on(
            'click',
            '.panel-heading span.clickable',
            function(e) {
                var $this = $(this);
                if (!$this.hasClass('panel-collapsed')) {
                    $this.parents('.panel').find('.panel-body').slideUp();
                    $this.addClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-up')
                            .addClass('glyphicon-chevron-down');
                } else {
                    $this.parents('.panel').find('.panel-body').slideDown();
                    $this.removeClass('panel-collapsed');
                    $this.find('i').removeClass('glyphicon-chevron-down')
                            .addClass('glyphicon-chevron-up');
                }
            })
</script>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel 1</h3>
        <span class="pull-right clickable"><i
            class="glyphicon glyphicon-chevron-up"></i></span>
    </div>
    <div class="panel-body">
        <div>
            What is Lorem Ipsum?<br /> Lorem Ipsum is simply dummy text of the
            printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s, when an unknown
        </div>
        <div>&nbsp;</div>
        <div>
            Why do we use it?<br /> It is a long established fact that a reader
            will be distracted by the readable content of a page when looking at
            its layout. The point of using Lorem Ipsum is that it has a
        </div>
    </div>
</div>
<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">Panel 2</h3>
        <span class="pull-right clickable"><i
            class="glyphicon glyphicon-chevron-up"></i></span>
    </div>
    <div class="panel-body">
        <table class="table" id="myTable">
            <thead>
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>John</td>
                    <td>Doe</td>
                    <td>john@example.com</td>
                </tr>
                <tr>
                    <td>Mary</td>
                    <td>Moe</td>
                    <td>mary@example.com</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

如何使用向上和向下箭头添加面板折叠

1 个答案: