Sie benötigen nur eine Akkordeon-Panel durch href zu verknüpfen und Minimierungsfunktion

Question

Hier ist eine Geige der Funktionalität beibehalten, Ich mag würde:

https://jsfiddle.net/jo6cfr7b/2/

Ich habe drei Akkordeon-Panels. Zwei von ihnen enthalten ein Untermenü, eines davon enthält nichts anderes als Links an anderer Stelle beim Klicken (mit href).

Wenn ich versuche, durch href auf meiner ersten Akkordeongruppe zu verknüpfen, verliere ich die Fähigkeit, alle Felder beim Klicken zu reduzieren. Es funktioniert einfach nicht mehr.

<div> 
<div id="accordion"> <!-- accordion 1 --> 
    <div class="panel"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> 
     Need this to link outside 
    </a> 
    <div id="accordionOne"> 
    </div> 
    </div> 

    <div class="panel"> <!-- accordion 2 --> 
    <a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"> 
     Collapsible Accordion 2 
    </a> 
    <div id="accordionTwo" class="collapse"> 
     <div class="panel-body"> 
     Change does not roll in on the wheels of inevitability, 
     but comes through continuous struggle. 
     And so we must straighten our backs and work for 
     our freedom. A man can't ride you unless your back is bent. 
     </div> 
    </div> 
    </div> 

    <div class="panel"> <!-- accordion 3 --> 
     <a data-toggle="collapse" data-parent="#accordion" href="#accordionThree"> 
     Collapsible Accordion 3 
     </a> 

     <div id="accordionThree" class="collapse"> 
     <!-- panel body --> 
     <div class="panel-body"> 
      You must take personal responsibility. 
      You cannot change the circumstances, 
      the seasons, or the wind, but you can change yourself. 
      That is something you have charge of. 
     </div> 

     </div> 
</div> 
</div> 

TLDR; Wie kann ich die Minimierungsfunktion beibehalten, wenn ich auf einen Akkordeongruppenanker klicke, während ich extern auf dem ersten Akkordeonfeld verlinken kann?

Answer 1

können Sie verwenden beide data-target und href ...

Gerade data-target="" für das Zusammendrückverhalten verwenden, und href=".." für die Außen auf dem ersten Zusammenbruch Link.

<a data-toggle="collapse" data-parent="#accordion" data-target="#accordionOne" href="/"> 
     Need this to link to another page (but collapse any currently open submenus) 
</a> 

Codeply Demo