Question

这里是我喜欢的功能的小提琴：

我有三个手风琴面板。其中两个包含一个子菜单，其中一个不包含任何东西，而是点击其他地方链接（使用href）。

当我尝试在我的第一个手风琴组上通过href链接时，我失去了在点击时折叠所有面板的能力。它已经不再适用了。

<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 ;单击任何手风琴组锚点时如何保持折叠功能，同时能够在第一个手风琴面板上进行外部链接？

Answer 1

您可以同时使用data-target和href ...

只需使用data-target=""进行折叠行为，并在第一个折叠链接上使用外部href=".."。

<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

需要通过href链接一个Accordion面板并保持折叠功能

1 个答案: