bootstrap手風琴觸發器從內部打開/關閉

我試圖通過單擊嵌套在裏面的按鈕關閉引導面板。我知道它是可能的，只是不能達到範圍。我打電話給崩潰班，我試圖顯示並隱藏它 - 任何想法？bootstrap手風琴觸發器從內部打開/關閉

$("#button1").click(function() { 
 
//close accordion 1 and open accordon 3 
 
    $("#collapseTwo").collapse(); 
 
    $("#collapseThree").CollapseIn(); 
 
});

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<body> 
 
<div class="bs-example"> 
 
    <div class="panel-group" id="accordion"> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseOne" class="panel-collapse collapse in"> 
 
       <div class="panel-body"> 
 
        <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a id="button1">Learn more.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseTwo" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
     <div class="panel panel-default"> 
 
      <div class="panel-heading"> 
 
       <h4 class="panel-title"> 
 
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a> 
 
       </h4> 
 
      </div> 
 
      <div id="collapseThree" class="panel-collapse collapse"> 
 
       <div class="panel-body"> 
 
        <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
</body>

來源

2015-09-09 user2557504

嘗試使用這一點，註釋掉你的JavaScript：

<a id="button1" data-toggle="collapse" data-target="#collapseOne">Learn more.</a>

來源

2015-09-09 20:42:04 gotmilk13531

你可以試試這個：

$("#button1").click(function() { 
    //close accordion 1 and open accordion 3 
    $("#collapseOne, #collapseThree").collapse('toggle'); 
});

這裏是fiddle。

<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" id="button1">Learn more.</a>

這裏是fiddle。

來源

2015-09-09 20:42:07 Beginner

bootstrap手風琴觸發器從內部打開/關閉

回答

相關問題