jQuery div在悬停时显示某些元素

我有一个带有两个div和一些UL的导航。我想隐藏第二列，使其仅在悬停时显示。此外，它应该只显示UL，属性“data-category-id”与“data-parent-category-id”相同。由于某些原因，这超出了我的能力，我需要使用jQuery来制作。一些平滑的动画也会很好。
这是我已经创建的一段代码，但它显然有一些问题。由于某种原因，当我鼠标输入应该使第二列出现的元素时，它一直显示和隐藏。

const itemLevelOne = $('.cs-navigation__item--level_1');
    const itemLevelTwo = $('.cs-navigation__item--level_2');
    const menuLevelThree = $('.cs-navigation__column___third');

    itemLevelTwo.hide();
    menuLevelThree.hide();
    itemLevelOne.mouseenter(function () {
        var attr = $(this).attr('data-category-id');
        if (typeof attr !== 'undefined' && attr !== false) {
            itemLevelTwo.each(function () {
                if ($(this).attr('data-parent-category-id') === attr) {
                    $(this).show('200');
                    menuLevelThree.show('200');
                } else {
                    $(this).hide('200');
                    menuLevelThree.hide('200');
                }
            });
        }
    });

我还创建了一个codepen与一些HTML代码，所以它是很相似的，我在我的网站上。第二列应该只出现当你在“埃尔悬停”和“埃尔悬停2”。在任何其他情况下，它应该隐藏。
https://codepen.io/bordini/pen/GRXgNEo
希望有一些善良的灵魂能够帮助我解决这个问题。非常感谢！

您的问题是您将级别2的<UL>封装在<DIV>中，cs-navigation__column___third类（HTML第24行），因此它是menuLevelThree的一部分。您将menuLevelThree保存在级别2的每个项目的事件处理程序中，show()和hide()-ing，这就是整个级别2菜单 Flink 的原因。
也许你把三级分区放错地方了
我注解掉了事件处理程序中的menuLevelThree操作，并更改了对.show()的第一个调用，使其最初可见，现在显示二级菜单，现在还需要实现mouseleave事件处理程序来隐藏二级菜单。
哦，如果你愿意使用jQuery-UI，你可以考虑https://jqueryui.com/menu/小部件--这样你就不需要手动处理菜单项的显示和隐藏了。但是我认为你需要分层地构建你的菜单结构（第2层是顶层的子层，第3层是第2层的子层）。

const itemLevelOne = $('.cs-navigation__item--level_1');
        const itemLevelTwo = $('.cs-navigation__item--level_2');
        const menuLevelThree = $('.cs-navigation__column___third');

        itemLevelTwo.hide();
        menuLevelThree.show();  // change to show()
        itemLevelOne.mouseenter(function () {
            var attr = $(this).attr('data-category-id');
            if (typeof attr !== 'undefined' && attr !== false) {
                itemLevelTwo.each(function () {
                    if ($(this).attr('data-parent-category-id') === attr) {
                        $(this).show('200');
                        // menuLevelThree.show('200');
                    } else {
                        $(this).hide('200');
                        //menuLevelThree.hide('200');
                    }
                });
            }
        });

nav {
  display: flex;
}

.cs-navigation__column___second{
  background: red;
}
.cs-navigation__column___third{
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="cs-navigation__column cs-navigation__column___second cs-navigation__extras" style="width: 291.16px;">
    <ul class="cs-navigation__list cs-navigation__list--level_1" data-parent-item-id="7" style="column-count: 1; width: 150px;">
      <li class="cs-navigation__item cs-navigation__item--level_1">
        <a href="#">El 1</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_1">
        <a href="#">El 2</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_1" data-category-id="57">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">
          El Hover</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_1" data-category-id="60">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">
          El Hover 2</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_1">
        <a href="#">El 3</a>
      </li>
    </ul>
  </div>

  <div class="cs-navigation__column cs-navigation__column___third cs-navigation__extras" style="width: 150px;">
    <ul class="cs-navigation__list cs-navigation__list--level_2" data-parent-item-id="57">
      <li class="cs-navigation__item cs-navigation__item--level_2" data-category-id="32" data-parent-category-id="57">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">1</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_2" data-category-id="32" data-parent-category-id="57">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">2</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_2" data-category-id="32" data-parent-category-id="57">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">3</a>
      </li>
    </ul>
    <ul class="cs-navigation__list cs-navigation__list--level_2" data-parent-item-id="60">
      <li class="cs-navigation__item cs-navigation__item--level_2" data-category-id="34" data-parent-category-id="60">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">1</a>
      </li>
      <li class="cs-navigation__item cs-navigation__item--level_2" data-category-id="34" data-parent-category-id="60">
        <a href="#" class="cs-navigation__link cs-navigation__link--level_1">2</a>
      </li>
    </ul>
  </div>
</nav>

jQuery div在悬停时显示某些元素

1条答案

相关问题

热门标签

最新问答