使手风琴的整个标题部分可点击

Question

目前我正在使用这样的手风琴，我有可以点击的glyphicon箭头展开/折叠它。 ：http://www.bootply.com/1fDNAjGFrJ

$('[data-toggle="collapse"]').click(function() {
  $(this).children(".glyphicon").toggleClass("glyphicon-chevron-up glyphicon-chevron-down");
});

<div class="container">
  <div class="panel-group" id="accordionMessagesSetup">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                        <span class="glyphicon glyphicon-chevron-up"></span>
                        Message Setup
                    </a>
        </h4>
      </div>
      <div id="collapseMessagesSetup" class="panel-collapse collapse in">
        <div>
          Actual Content goes here
        </div>
      </div>
    </div>
  </div>
</div>

可点击区域目前只是该图标。如何扩展它以使整个panel-title部分可点击？

Answer 1

只是一个简单的CSS案例，让a成为block并使用padding来填充标题：

.accordion-toggle {
  display: block;
  padding: 10px 15px;
}

.panel-heading {
   padding: 0;
}

Answer 2

只需将此添加到您的css

即可

.accordion-toggle{
   display: block;
}

Answer 3

使面板标题的锚点显示block。

例如，

.panel-title a {
    display: block;
}

WORKING LINK

希望这有帮助。