Menu icon Foundation
F6 is-active class over-applied in data-accordion-menu

I am using data-accordion-menu to display sub-elements within a menu.  I would like specific highlighting on the expanded parent, so am using the 'is-active' class to identify which sub-menu is active.  However, it seems that 'is-active' persists even when the menu is not expanded.

See code snippet below.  I would expect that the 'is-active' class would be applied only to the UL which is expanded.  However if you expand both, and then close both, you can see that is-active is remains applied to both nested ULs

(have attached screenshot - it is just about legible)

This seems like a bug (there is a related issue here)

Can anyone confirm if this is a bug?

<ul class="vertical menu" data-accordion-menu>
  <li>
    <a href="#">Parent 1</a>
    <ul id="nested-link-1" class="menu vertical nested">
      <li ><a href="#">Link 1</a></li>
    </ul>
  </li>
  <li><a href="#">Parent 2</a>
    <ul id="nested-link-2" class="menu vertical nested">
      <li><a href="#">Link 2</a></li>
    </ul>
  </li>
</ul>

accordion-menu

I am using data-accordion-menu to display sub-elements within a menu.  I would like specific highlighting on the expanded parent, so am using the 'is-active' class to identify which sub-menu is active.  However, it seems that 'is-active' persists even when the menu is not expanded.

See code snippet below.  I would expect that the 'is-active' class would be applied only to the UL which is expanded.  However if you expand both, and then close both, you can see that is-active is remains applied to both nested ULs

(have attached screenshot - it is just about legible)

This seems like a bug (there is a related issue here)

Can anyone confirm if this is a bug?

<ul class="vertical menu" data-accordion-menu>
  <li>
    <a href="#">Parent 1</a>
    <ul id="nested-link-1" class="menu vertical nested">
      <li ><a href="#">Link 1</a></li>
    </ul>
  </li>
  <li><a href="#">Parent 2</a>
    <ul id="nested-link-2" class="menu vertical nested">
      <li><a href="#">Link 2</a></li>
    </ul>
  </li>
</ul>
Rafi Benkual over 1 year ago

Not sure why this is that way. You could also target the `aria-hidden="true"` attribute.

 

 

Jarryd Fillmore over 1 year ago

+1 to Rafi!

Matt Hegarty over 1 year ago

Thanks for responses.  I worked around this using JQuery.