Alter script to remove class on active <ul> target

Question

In my horizontal menu / submenu I'm coding I have a class="hidden" on the subMenuBarWrapper ul that I'd like to remove on the active ul on mouseenter. Currently I have .toggle which is okay but I'd prefer the "class" way instead. Could someone help me with a possible solution? Thanks.

HTML

   <div class="subMenuBarWrapper">
     <ul data-parentid="1" class="hidden">
            <li class="">
                   <a href="etc....</a>
                       </li>
     </ul>
   </div>

JS

 $('.nav_options li a').on('mouseenter', function () {
        var targetmatch = $(this).attr('data-submenunum');
        $('.subMenuBarWrapper ul').each(function () {
        $(this).toggle(targetmatch.length < 1 || $(this).attr('data-parentid').indexOf(targetmatch) > -1);
     });
});

Answer 1

You can use your exact same logic and use toggleClass() :

$(this).toggleClass('hidden', targetmatch.length < 1 || $(this).data('parentid').indexOf(targetmatch) > -1);

The first argument is the class name to use, and the second is a boolean to determine whether this should be added to or removed from the element in question. Also, note the use of .data() over .attr('data-...')