Bootstrap手風琴（點擊手風琴時應該關閉其他手風琴）

Question

我目前的手風琴功能是當我們點擊'+'號時，它會打開手風琴並將它打開，即使我們點擊了其他手風琴的'+'號。

我需要的是點擊一個手風琴，其他開放手風琴應關閉。 以下是我的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

Answer 1

您可以通過使用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>

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.