模擬點擊打開引導程序崩潰元素

我試圖模擬Bootstrap collapse頭上的clik，但沒有成功。模擬點擊打開引導程序崩潰元素

我真正想要做的是，當用戶點擊手風琴標題附近的圖像時，它會打開，就好像用戶點擊了標題的<a>。

這裏是一個FIDDLE爲了更好地理解

我的HTML標記看起來是這樣的：

<div class="accordion" id="accordionFilter"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
      <img src="http://placehold.it/40x40" onclick="SimulateClick();"> 
      <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne"> 
       Filter the results 
      </a> 
     </div> 
     <div id="collapseOne" class="accordion-body collapse"> 
      <div class="accordion-inner"> 
       <div class="row"> 
        <br> 
        <div class="col-lg-3 col-md-3 col-sm-3"> 
         1st column content 
        </div> 
        <div class="col-lg-3 col-md-3 col-sm-3"> 
         2nd column content 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

但我不知道怎麼寫「上點擊圖片，打開手風琴「在SimulateClick() JS方法中。

我的東西試過像

$("#collapseOne").click();

或

$("#collapseOne").addClass("in");

但它不會做任何事情。

有什麼想法嗎？

來源

2014-06-05 AlexB

您不需要模擬點擊，因爲引導提供了可用於以編程方式控制插件的方法。在這種情況下有一個「切換」：

$('.accordion-heading img').click(function() { 
 
    $('#collapseOne').collapse('toggle'); 
 
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
 
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 

 
<div class="accordion" id="accordionFilter"> 
 
    <div class="accordion-group"> 
 
    <div class="accordion-heading"> 
 
     <img src="http://placehold.it/40x40"> 
 
     <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne"> 
 
     Filter the results 
 
     </a> 
 
    </div> 
 
    <div id="collapseOne" class="accordion-body collapse" style="height: 0px;"> 
 
     <div class="accordion-inner"> 
 
     <div class="row"> 
 
      <br> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
      1st column content 
 
      </div> 
 
      <div class="col-lg-3 col-md-3 col-sm-3"> 
 
      2nd column content 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

在API中可用的方法更多信息：http://getbootstrap.com/javascript/#collapse-usage

來源

2014-06-05 07:58:49

對不起，我沒有看到這個選項...謝謝！如果其他人稍後閱讀此文章並在調用'collapse'方法時出現'Uncaught TypeError：undefined不是函數'，則僅供參考：使用'$ .noConflict（）'，似乎'.collapse'被其他JS librairies – AlexB

不要忘了還有'$'''選擇器'）。collapse（'show'）'和'$（'selector'）。collapse（'hide'）' – Nieminen

如果我正確地得到您的要求，爲什麼不包括<img>裏面有<a>標籤？

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordionFilter" href="#collapseOne"> 
     <img src="http://placehold.it/40x40"> 
     Filter the results 
</a>

是this你需要什麼？

來源

2014-06-05 08:01:50

它可能更簡單，但它不完全是我想要。不過，謝謝你的想法！ – AlexB

模擬點擊打開引導程序崩潰元素

回答

相關問題