面板体打开时如何隐藏面板标题

时间:2017-06-09 07:15:46

标签: html5 bootstrap-accordion

点击编辑,面板体显然会在我想要隐藏面板标题的同时打开

This is the output of my code

<div class="panel panel-default">
            <div class="panel-heading row" id="first">
                <div class="col-md-4">First Name</div>
                <div class="col-md-4"><?php echo $row->first_name; ?></div>
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <div class="col-md-4 profile-edit"> <i class="fa fa-pencil"></i> Edit</div>
                </a>
            </div>
            <div id="collapseOne" class="panel-collapse collapse">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-7 col-md-offset-2 text-center">
                            <label class="col-md-4">First Name</label>              
                            <div class="col-md-8"> 
                                <input type="hidden" name="id" value="<?php echo $row->id; ?>" />
                                <input type ="text" name="first_name" id="first_name" class="form-control" value="<?php echo $row->first_name; ?>"/></br>
                                <input type="submit" value="Save" class="btn btn-success" style="width:70px;">
                                <button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

1 个答案:

答案 0 :(得分:0)

最简单的方法是使用jquery!

$(document).ready(function(){
    $(".profile-edit").on("click", function(){
        $(".panel-heading").hide();
    });
});

虽然这只是头顶,所以可能需要一些技巧。