使整個手風琴標題區域可點擊

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;
}

工作鏈接

希望這可以幫助。