2014-10-02 114 views
0

我有一個手風琴,我想要點擊標題中的任何地方摺疊面板,而不是標題觸發崩潰。但是我有一個複選框,它有自己的目的,它會選擇剛剛打開的面板中的所有元素。我現在設置了它的方式,點擊複選框將觸發面板崩潰。有沒有一種方法可以將面板設置爲在點擊標題中的任何位置時進行切換,但是特別排除單擊複選框?Twitter Bootstrap - 不包含元素從手風琴摺疊

<div class="panel panel-default"> 
         <div class="panel-heading" data-toggle="collapse" href="#group-title"> 
          <h4 class="panel-title"> 
          <input type="checkbox" name="group-title" class="group-checkbox"> <a data-toggle="collapse" href="#group-title"> 
           charity-group-title 
          </a> 
          </h4> 
         </div> 
         <div id="group-title" class="panel-collapse collapse"> 
          <div class="panel-body"> 
          <div class="row-fluid"> 

           <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 group-title-orgs"> 
            <input type="checkbox" name="charity-id" class="flatten link group-title"> <div data-toggle="collapse" data-target="#org-id" class="flatten link"> 
               org-id-name 
              </div> 

              <div id="org-id" class="collapse">org-id-info</div> 
             </div> 

            </div> 
          </div> 
         </div> 
         </div> 

有沒有事做stopPropagation從jQuery的?

編輯:我試着調用jQuery .click()方法並從複選框中刪除data-toggle屬性,但這也不起作用。

引導小提琴:http://www.bootply.com/PyzEBFPfBN

回答

1

您應該使用停止傳播像

$('.panel-title input[type="checkbox"]').click(function (e) { 
    e.stopPropagation() 
}); 

但是,這不是一個真正的良好的用戶體驗是混亂的。我建議你在點擊標題或複選框時點擊用戶點擊打開手風琴&的箭頭「 - >」複選框將被切換