Question

Onclick内的(.cancel-name) 取消按钮的

panel-body，panel-body必须隐藏，我已使用{{1}为此功能，它工作正常。但是，如果页面刷新后编辑不起作用，编辑将起作用，任何人都可以帮助我吗？

查看页面

toggle

脚本

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading row">
            <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="submit" class="btn btn-success" name="" id="">Save</button>-->
                            <button  type="button" class="btn btn-warning cancel-name">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

取消时，您不需要click event toggle折叠panel。只需将data-target和data-toggle属性添加到cancel button就可以了解 编辑 按钮：

示例：

<button type="button" data-target="#collapseOne" data-toggle="collapse" class="btn btn-warning cancel-name">Cancel</button>

工作代码段

＆＃13;
＆＃13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading row"> <div class="col-md-4">First Name</div> <div class="col-md-4"> John Doe </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> </div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

对于Jquery 1.9或更高版本，未启用toggle（），您可以使用Jquery migrate来解决它。

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

建议使用类来隐藏或显示元素 Change css through jquery after a click on a div

Toggle（）函数不能用于手风琴

2 个答案: