ブートストラップアコーディオン（アコーディオンをクリックすると他のアコーディオンを閉じる必要があります）

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.

 関連する問題

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