javascript - 使 Accordion 的整个标题部分可点击

Question

目前我正在像这样使用 Accordion ，并且我有可以单击以展开/折叠它的字形图标箭头。 : 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 部分 clickable ？

Answer 1

只是一个简单的css案例，让a成为一个block并使用padding来填充title:

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

.panel-heading {
   padding: 0;
}