Question

所以我有一个菜单，我在每个父菜单上添加一个字体真棒图标。如果他们点击图标，它将显示向下滑动动画以显示他们的子菜单。

目前我的代码是这样的在css

li {
    a {
        border-bottom: solid thin $color-green;
        @include font-size(1.2);
        padding: 5px 0px;
    }
    .sub-menu {
        display: none;
        list-style: none;
        padding: 0;
        a {
            padding: 5px 20px;
            display: block;
        }
    }
    &.menu-item-has-children {
        a {
            &::after {
                content: '\f055';
                font-family: FontAwesome;
                font-weight: normal;
                font-style: normal;
                float: right;
            }
            &::before{
            content: '\f056;';
            font-family: FontAwesome;
            font-weight: normal;
            font-style: normal;
            float: right;
           }
        }
    }
}

在我的php文件上（即时使用wp）

<div id="navbar-main-menu" class="collapse navbar-collapse">
   <?php
      if (has_nav_menu('primary_navigation')) :
        wp_nav_menu(['theme_location' => 'primary_navigation', 'menu_class' => 'nav top-menu ']);
      endif;
      ?>
</div>
<!--/.nav-collapse -->

我想jquery仅在最大分辨率767上有效，所以我的脚本是这样的。但我不知道如何定位后和制作具体的代码，所以当我点击1个父链接时，它没有触发另一个父链接来显示他们的子菜单。

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 767) {
            $('.menu-item-has-children a::after').click(function() {
                $('a').slideToggle();
            });
        } else {

        }
    });
});

这是我现在的进步

请帮助

Answer 1

使用此关键字代替定位a元素。

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 767) {
            $('.menu-item-has-children a').click(function() {
                $(this).slideToggle();
            });
        } else {

        }
    });
});

单独说明为什么使用计时器检查宽度。我不确定这是否会阻碍您的代码。如果上面的代码不起作用，请创建一个JSfiddle并共享链接，以便我可以更好地查看。

<强>更新

伪元素不适用于jquery选择器。更新了相同的代码。但这可能不是OP正在寻找的完整解决方案。

如何使用java脚本定位伪元素

1 个答案: