用多個按鈕和div切換合攏

真的很簡單，我需要此代碼中的按鈕切換關閉任何其他數據 - 目標div，可能在單擊該按鈕時打開。用多個按鈕和div切換合攏

我試着用手風琴等功能搞亂了，代碼看起來不錯。我在這方面是超級新人，並且一整天的大部分時間都在徘徊，直到我通過反覆試驗進行了對比。

所以，如果你運行代碼，你會看到一些按鈕。當我點擊這些按鈕時，我只想要他們呼叫的數據出現在它們上方。如果您知道要調用什麼來突出顯示單擊的按鈕並在數據可見時使其突出顯示，則可獲得獎勵。我會解決適當的切換。

這似乎是一個非常基本的問題，我搜查了很多，但我找不到任何遠遠超出我的能力水平或真正相關的任何東西。我一直在搜索'切換數據 - 目標多個按鈕'和這樣的組合。讓我知道你是否有修復。

謝謝！ //歡呼

<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
<div id="intro" class="intro"> 
 
    <div class="text-content"> 
 
     {{ page.basic.content }} 
 
    </div> 
 
    
 
    <div class="panel-group" id="accordion"> 
 
    <div id="demo" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/ally">Become an Ally</a></p> 
 
    </div> 
 
    </div> 
 
    
 
    <div id="demo1" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of the annual review</p> 
 
     <p>-sticker pack</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/advocate">Become an Advocate</a></p> 
 
    </div> 
 
    </div> 
 
     
 
    <div id="demo2" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/defender">Become a Defender</a></p> 
 
    </div> 
 

 
    <div id="demo3" class="panel-collapse collapse"> 
 

 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/guardian">Become a Guardian</a></p> 
 
    </div> 
 
    
 
    <div id="demo4" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
     <p>-personal liason at CJFE</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/campaigner">Become a Campaigner</a></p> 
 
    </div> 
 
    
 
    <div id="demo5" class="panel-collapse collapse in"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
     <p>-personal liason at CJFE</p> 
 
     <p>-VIP invitation to annual gala</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/champion">Become a Champion</a></p> 
 
    </div> 
 
     
 
    <button type="button" class="button" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button> 
 
    <button type="button" class="button" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button> 
 
    <button type="button" class="button" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button> 
 
    <button type="button" class="button" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button> 
 
    <button type="button" class="button" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button> 
 
    <button type="button" class="button" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button> 
 

 
</body>

來源

2016-11-16 Kevin Metcalf

我試過的代碼另一位來自https://stackoverflow.com/questions/40400604/bootstrap-collapse-with-multiple -button-and-div？rq = 1 在該頁面上正常工作，但無法正常工作（不會摺疊div或替換內容，只顯示它們並堆疊它們），即使沒有任何edi TS。想知道是否與我的網站上的圖書館或現有CSS重疊的東西有關？ –

也許你想改變你的代碼，使其更容易，但如果你想讓它工作的方式，你需要隱藏所有div，然後打開你的。

只需添加到您的標題：

function hideall() { 
 
    $('.panel-collapse').each(function() {     
 
     $(this).collapse('hide'); 
 
    }); 
 
}

並把一個onclick利斯特對所有div：

<button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button>

應做的伎倆。

在這裏看到：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <script type="text/javascript" language="javascript"> 
 
    \t function hideall() { 
 
\t \t $('.panel-collapse').each(function() { 
 
      $(this).collapse('hide'); 
 
\t \t }); 
 
\t } 
 
    </script> 
 
</head> 
 
<body> 
 
<div id="intro" class="intro"> 
 
    <div class="text-content"> 
 
     {{ page.basic.content }} 
 
    </div> 
 
    
 
    <div class="panel-group" id="accordion"> 
 
    <div id="demo" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="panel-collapse collapse"> 
 
     <div class="panel-body"> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/ally">Become an Ally</a></p> 
 
    </div> 
 
    </div> 
 
    
 
    <div id="demo1" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of the annual review</p> 
 
     <p>-sticker pack</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/advocate">Become an Advocate</a></p> 
 
    </div> 
 
    </div> 
 
     
 
    <div id="demo2" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/defender">Become a Defender</a></p> 
 
    </div> 
 

 
    <div id="demo3" class="panel-collapse collapse"> 
 

 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/guardian">Become a Guardian</a></p> 
 
    </div> 
 
    
 
    <div id="demo4" class="panel-collapse collapse"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
     <p>-personal liason at CJFE</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/campaigner">Become a Campaigner</a></p> 
 
    </div> 
 
    
 
    <div id="demo5" class="panel-collapse collapse in"> 
 
<table> 
 
    <tr> 
 
     <th> 
 
     <td style="text-align:left"> 
 
     <div> 
 
<p>-invitation to AGM</p> 
 
<p>-invitations to ally-only events</p> 
 
<p>-monthly electronic newsletter</p> 
 
<p>-copy of annual review</p> 
 
     <p>-sticker pack</p> 
 
     <p>-t shirt</p> 
 
     <p>-cofee mug or tote bag</p> 
 
     <p>-personal liason at CJFE</p> 
 
     <p>-VIP invitation to annual gala</p> 
 
      </div> 
 
      </td> 
 
     <th> 
 
     <img src ="https://c1.staticflickr.com/9/8246/8560552146_6b50021122.jpg" align = "right" height="200" width="200" style="margin:0px 0px 0px 40px"> 
 
     </th> 
 
    </tr> 
 
     </table> 
 
     <p><a class="button" href="/champion">Become a Champion</a></p> 
 
    </div> 
 
     
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo5" data-target="#demo5" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$99.99/month - CHAMPION</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo4" data-target="#demo4" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$59.99/month - CAMPAIGNER</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo3" data-target="#demo3" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$29.99/month - GUARDIAN</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo2" data-target="#demo2" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$14.99/month - DEFENDER - <font color="red">BEST VALUE</font> </h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo1" data-target="#demo1" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$9.99/month - ADVOCATE</h3></button> 
 
    <button type="button" class="button" onclick="hideall()" data-toggle="collapse" href="#demo" data-target="#demo" style="margin:20px 20px 20px 20px;"> <h3 style= "font-family:US101; color:#FFF;">$5.00/year - ALLY</h3></button> 
 

 
</body> 
 
</html>

問候

來源

2016-11-16 23:47:52 Daidon

工作正常！非常感謝。沒有想到onclick，但這是非常有道理的。你搖滾！ –

如果它的工作，這將是很好，如果你標記答案爲接受。 :-) – Daidon

用多個按鈕和div切換合攏

回答

相關問題