Bootstrap手风琴（点击手风琴时应该关闭其他手风琴）

我目前的手风琴功能是当我们点击'+'号时，它会打开手风琴并将它打开，即使我们点击了其他手风琴的'+'号。Bootstrap手风琴（点击手风琴时应该关闭其他手风琴）

我需要的是点击一个手风琴，其他开放手风琴应关闭。以下是我的Codepen链接。

<aside class="col-md-4"> 
<section class="sidebar-tools"> 
    <h4 class="my-4">My</h4> 
    <nav> 
     <a class="tile-link" data-toggle="collapse" href="#myDoctor"> 
     My 
     </a> 
     <div class="collapse sidebar-collapse" id="myDoctor"> 
     <a href="#" class="sidebar-collapse-link">Viewr</a> 
     <a href="#" class="sidebar-collapse-link">Change</a> 
     </div> 
    <a class="tile-link" data-toggle="collapse" href="#IDcards"> Cards</a> 
     <div class="collapse sidebar-collapse" id="IDcards"> 
     <a href="#" class="sidebar-collapse-link">View</a> 
     <a href="#" class="sidebar-collapse-link">Change </a> 
    </div> 
     <a class="tile-link" href="#">nformation</a> 
     <a class="tile-link" href="#"> Estimator</a> 
    </nav> 
    <h4 class="my-4">My Tools</h4> 
    <nav> 
    <a class="tile-link" href="#">Cards</a> 
    <a class="tile-link" href="#">Enformation</a> 
    <a class="tile-link" href="#"> Estimator</a> 
    </nav> 
    </section> 
    </aside>

感谢 CodePen

来源

2017-05-25 user3916062

您可以通过使用data-parent你的链接做到这一点，这里是你的代码片断

var $myGroup = $('#myGroup'); 
 
$myGroup.on('show.bs.collapse','.collapse', function() { 
 
    $myGroup.find('.collapse.in').collapse('hide'); 
 
});

.sidebar-tools a { 
 
    color: white; 
 
} 
 

 
a.tile-link { 
 
    text-decoration: none; 
 
} 
 

 
.tile-link { 
 
    -js-display: flex; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    background-color: #2980b9; 
 
    padding: 10px; 
 
    margin: 2px 0; 
 
} 
 
.tile-link:hover { 
 
    background-color: #2980b9; 
 
} 
 
.tile-link[data-toggle]:after { 
 
    content: '\f067'; 
 
    font-family: 'fontawesome'; 
 
    transition: all .25s ease-in-out; 
 
    float: right; 
 
} 
 
.tile-link[aria-expanded="true"]:after { 
 
    transform: rotate(45deg); 
 
} 
 

 
.sidebar-collapse { 
 
    background-color: #95a5a6; 
 
    margin-top: -2px; 
 
} 
 
.sidebar-collapse .sidebar-collapse-link { 
 
    color: white; 
 
    display: block; 
 
    padding: 10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script> 
 

 

 
<aside class="col-md-4" id="myGroup"> 
 
<section class="sidebar-tools"> 
 
    <h4 class="my-4">My</h4> 
 
    <nav> 
 
     <a class="tile-link" data-toggle="collapse" href="#myDoctor" data-parent="#myGroup"> 
 
     My 
 
     </a> 
 
     <div class="collapse sidebar-collapse" id="myDoctor"> 
 
     <a href="#" class="sidebar-collapse-link">Viewr</a> 
 
     <a href="#" class="sidebar-collapse-link">Change</a> 
 
     </div> 
 
    <a class="tile-link" data-toggle="collapse" data-parent="#myGroup" href="#IDcards"> Cards</a> 
 
     <div class="collapse sidebar-collapse" id="IDcards"> 
 
     <a href="#" class="sidebar-collapse-link">View</a> 
 
     <a href="#" class="sidebar-collapse-link">Change </a> 
 
    </div> 
 
     <a class="tile-link" href="#">nformation</a> 
 
     <a class="tile-link" href="#"> Estimator</a> 
 
    </nav> 
 
    <h4 class="my-4">My Tools</h4> 
 
    <nav> 
 
    <a class="tile-link" href="#">Cards</a> 
 
    <a class="tile-link" href="#">Enformation</a> 
 
    <a class="tile-link" href="#"> Estimator</a> 
 
    </nav>

来源

2017-05-25 20:02:01

我有一个问题。应该在哪里编写代码.var $ myGroup = $（'＃myGroup'）; （'。collapse.in'）。collapse（'hide'）; }）;这个函数可以用来创建一个新的文件， – user3916062

写入内部脚本标记。如

Bootstrap手风琴（点击手风琴时应该关闭其他手风琴）

回答

相关问题