如何在 wordpress 的“<li></li>”菜单项中添加 span 元素？

【问题标题】：How do you add a span element inside an '<li></li>' menu item in wordpress?如何在 wordpress 的“<li></li>”菜单项中添加 span 元素？
【发布时间】：2021-10-30 23:54:27
【问题描述】：

如果 li 具有类 menu-item-has-children，则在其中插入一个 span 元素，其 id 为“menu_toggle[x]”，其中“x”将根据已存在的名为“的 id 的数量而增加” menu_toggle[x]。

我基本上试图让静态 html 版本的菜单在 wordpress for mobile 上正常工作。

这是我在 wordpress 菜单中想要的静态 html 和 css 的屏幕截图（顺便说一句，它是相同的，使用相同的 css（稍作修改）但丢失了我的“+”menu_toggle 类）我现在正在尝试重新创建并添加到我的 wp 菜单中）。

在我的 wp 版本中，除了我隐藏第一个 ul 下拉列表（显示：无）之外，一切正常，因为我希望只使用 jquery 代码通过点击事件显示它。

在没有“过度设计”或“过度复杂化”的情况下，最好的方法是什么？我只想要最简单的无忧方法谢谢。

【问题讨论】：

  • 顺便说一句，在我这个菜单的 wp 版本中，第一个 '
    • 的 id 为 menu-item-37，默认情况下由 wp 分配。 ie - 而我想要做的是在上面放置一个 ie - 我相信我需要使用 id 'menu-item-37' 来定位 li...
  • 最好的方法可能是使用您自己的自定义 NavWalker。这里的基本示例：gist.github.com/kosinix/5544535

    • 标签： javascript html jquery css wordpress


    【解决方案1】：

    你可以像这样使用脚本：

    var clickable = $('.mbnav__state').attr('data-clickable');
    $('.mbnav li:has(ul)').addClass('has-sub');
    $('.mbnav .has-sub>a').after('<em class="mbnav__caret">');
    if (clickable == 'true') {
        $('.mbnav .has-sub>.mbnav__caret').addClass('trigger-caret');
    } else {
        $('.mbnav .has-sub>a').addClass('trigger-caret').attr('href', 'javascript:;');
    }

    /* menu open and close on single click */
    $('.mbnav .has-sub>.trigger-caret').click(function () {
        var element = $(this).parent('li');
        if (element.hasClass('is-open')) {
            element.removeClass('is-open');
            element.find('li').removeClass('is-open');
            element.find('ul').slideUp(200);
        }
        else {
            element.addClass('is-open');
            element.children('ul').slideDown(200);
            element.siblings('li').children('ul').slideUp(200);
            element.siblings('li').removeClass('is-open');
            element.siblings('li').find('li').removeClass('is-open');
            element.siblings('li').find('ul').slideUp(200);
        }
    });

    https://prnt.sc/1qyjcq8

    【讨论】：

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode