在引导中使用可折叠

我有两个按钮可以显示两个不同的元素。当我点击第一个按钮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

在引导中使用可折叠

回答

相关问题