在引導中使用可摺疊

我有兩個按鈕可以顯示兩個不同的元素。當我點擊第一個按鈕FIRST時顯示。當我點擊第二個按鈕SECOND顯示，但FIRST也是可見的。我想要發生的是當第二個按鈕被點擊時FIRST應該隱藏並且應該顯示SECOND。在引導中使用可摺疊

代碼：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Simple Collapsible</h2> 
 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">Simple collapsible</button> 
 
    <div id="first" class="collapse"> 
 
     FIRST 
 
    </div> 
 
<br> 
 
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">Simple collapsible</button> 
 
    <div id="second" class="collapse"> 
 
    SECOND 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2015-11-23 Mohit Bhasi

當目標獲得collapsed時in類被添加。因此，只需在您的button中添加click event，並在.collapse元素上使用removeClass，然後刪除名爲in的類。這將做到這一點。

$('button').on('click',function(){ 
 
    $('.collapse').removeClass('in'); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<div class="container"> 
 
    <h2>Simple Collapsible</h2> 
 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#first">Simple collapsible</button> 
 
    <div id="first" class="collapse"> 
 
     FIRST 
 
    </div> 
 
<br> 
 
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#second">Simple collapsible</button> 
 
    <div id="second" class="collapse"> 
 
    SECOND 
 
    </div> 
 
</div> 
 

 
</body> 
 
</html>

來源

2015-11-23 06:47:10

非常感謝。效果不錯 –

隨時隨地..快樂編碼.. :) –

jQuery中使用此

$('class1').click(function() { 
    $('yourDropDowmID').hide(); 
}

這應該隱藏自己先前打開的可摺疊並做了其他類只要重複這一點，但添加相應的班級或身份證號碼

希望這有助於:)

來源

2015-11-23 06:47:00 RyanM

在引導中使用可摺疊

回答

相關問題