Question

当其子菜单具有有效的类时，我需要为子菜单添加类。孩子可能有几个父母。

我写了这段代码，但是没有用。

   

 if ($('.megamenu__list li[data-id]').hasClass('menu__list--active')) {
       var $aSelect = $(this);
       $('.megamenu__subcategory li').addClass('menu__subcategory--inactive').removeClass('menu__subcategory--child')
       .filter(function() {
        return $(this).data('id').includes($aSelect.data('id'));
       })  
       .addClass('menu__subcategory--child').removeClass('menu__subcategory--inactive');  
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul class="megamenu__list">        
   <li data-id="1" class=""><a href="#">Menu 1</span></a></li>

   <li data-id="2" class=""><a href="#">Menu 1</a></li>

   <li data-id="3" class=""><a href="#">Menu 1</a></li>

   <li data-id="4" class=""><a href="#">Menu 1</a></li>

   <li data-id="5" class="menu__list--active"><a href="#">Menu 1</a></li>
 </ul>
 
<div class="megamenu__subcategory">
   <ul>
      <li data-id="[1,3]" class="menu__subcategory--inactive"><a href="#">SubMenu 1</a></li>
      <li data-id="[2]" class="menu__subcategory--inactive"><a href="#">SubMenu 2</a></li>
  </ul>
  <ul>
      <li data-id="[3]" class="menu__subcategory--inactive"><a href="#">SubMenu 3</a></li>
      <li data-id="[4]" class="menu__subcategory--inactive"><a href="#">SubMenu 4</a></li>
  </ul>
</div>

Answer 1

说明您的代码：

此代码位于点击功能中吗？

// if(hasclass), it's not function so this in this condition is undefined
if($('.megamenu__list li[data-id]').hasClass('menu__list--active'))
{
    // Get this, but this == function/object parent
    var $aSelect = $(this);

    // Get all .megamenu__subcategory li
    $('.megamenu__subcategory li')

        // Update class
        .addClass('menu__subcategory--inactive')
        .removeClass('menu__subcategory--child')

        // Select all elems with data-id attriute include parent data id
        .filter(function()
        {
            return $(this).data('id').includes($aSelect.data('id'));
        })

        // Update class in this select
        .addClass('menu__subcategory--child')
        .removeClass('menu__subcategory--inactive')
    ;
}

我的解决方案：

// When click menu
$('.megamenu__list li').click(function()
{
    // Remove all active menu
    $('.megamenu__list li').removeClass('menu__list--active');

    // Add class active for this menu
    $(this).addClass('menu__list--active');

    // Get menu id (parseint beacause jsonparse used)
    var menuId = parseInt($(this).data('id'));

    // Force reset all class category
    $('.megamenu__subcategory li').attr('class','menu__subcategory--inactive');

    // Update all categories with id
    $('.megamenu__subcategory li').each(function()
    {
        // If data id contain menuid (why jsonparse ? If my menuId == 1, match with data-id="[11,12,13]")
        if(JSON.parse($(this).data('id')).indexOf(menuId) !== -1) $(this).addClass('menu__subcategory--child').removeClass('menu__subcategory--inactive');
    });
});

[编辑]，无需单击：

jsfiddle：https://jsfiddle.net/8f3zyLgx/

当父级具有活动类JQuaery时，按数据ID将类添加到子菜单项

1 个答案: