Question

有一个引导面板在单击其标题时会折叠。

如何在此面板上进行两次修改？

当用户点击其中的任何位置时，面板会折叠并重新打开标题栏（灰色咏叹调）。
有没有办法避免使用fontawesome并坚持使用 Glyphicons

首选没有onload脚本，因为可以动态添加面板。

＆＃13;

.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseOne" 
               href="#collapseOne">
            Collapsible Group Item #1
            </a>
         </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam.
            </div>
        </div>
    </div>
</div>

＆＃13;

Answer 1

尝试使用以下代码点击灰色区域中的任意位置：

＆＃13;

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {

＆＃13;

.panel-heading a:after {
    font-family:'Glyphicons Halflings';
    content:"\e114";
    float: right;
    color: grey;
}
.panel-heading a.collapsed:after {
    content:"\e080";
}
.panel-default>.panel-heading {
    padding: 0;
}
.panel-title a {
    width: 100%;
    display: inline-block;
    text-decoration: none;
    padding: 10px 15px;
}
.panel-title a:hover, .panel-title a:focus {
    text-decoration: none;
    outline: none;
}

＆＃13;

Answer 2

您可以在display:block;

内的锚标记内使用panel-title

.collapseAnchor{ display:block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"/>

<div class="panel-group" id="accordion">
    <div class="panel panel-default" id="panel1">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-target="#collapseOne" 
               href="#collapseOne" class="collapseAnchor">
            Collapsible Group Item #1
            </a>
         </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat eget leo vel condimentum. In dignissim sed nunc et malesuada. Etiam elit lacus, auctor sed mi sed, luctus convallis augue. Aenean tristique eu magna eu sodales. Sed sit amet enim ut quam tincidunt consectetur vitae eu purus. Sed lectus turpis, gravida sit amet arcu id, malesuada ornare nisl. Sed dignissim quam non tellus congue vestibulum non vel turpis. Fusce vehicula augue lacinia felis mattis, quis ultricies ex faucibus. Nulla quis arcu a nunc pulvinar egestas ac elementum elit. Morbi ultricies condimentum fermentum. Vivamus a purus dui. Suspendisse nulla arcu, molestie sed cursus et, luctus id quam. Donec enim est, consequat vel luctus vitae, fringilla id tortor. Nullam eget justo malesuada, porttitor mauris sit amet, luctus quam.
            </div>
        </div>
    </div>
</div>

标题栏上的bootstrap div colapse点击

2 个答案: