javascript - 错误 : [jquery] function with wordpress

Question

我是编程世界的新手，我有问题想问你。我希望你可以帮助我。我在 WordPress 网站上遇到问题。我使用一个主题为“移动”版本创建一个菜单，该版本使用以下函数打开菜单。

container.find( '.dropdown-toggle' ).click(
    function( e ) {
        var _this = $( this );
        e.preventDefault();
        _this.toggleClass( 'toggled-on' );
        _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
        _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
        _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
    });

当然，当单击类为 .dropdown-toggle 的对象时，一切都会正常工作。

现在我想将该功能应用于每个元素的编写。让我更好地解释如何在我使用的 WordPress 中创建子菜单(href = #)，这会导致创建子菜单，但当我单击链接时，子菜单不会打开。主题使用小箭头打开子菜单。我希望用户单击 href = # 链接来打开相关的子菜单。菜单的 html 类型为:

<ul>
    <li id="menu-item-2476" class="menu-item" aria-haspopup="true">
        <a href="#">menu 1</a>
        <button class="dropdown-toggle" aria-expanded="false"></button>
        <ul class="sub-menu">
            <li id="menu-item-435" class="menu-item">
                <a href="https://www.myhost.it">sub menu1</a>
            </li>
        </ul>
    </li>
</ul>

一旦我点击 .dropdown-toggle 元素，html 就会变成

<ul>
    <li id="menu-item-2476" class="menu-item" aria-haspopup="true">
        <a href="#">menu 1</a>
        <button class="dropdown-toggle toggled-on" aria-expanded="true"></button>
        <ul class="sub-menu toggled-on">
            <li id="menu-item-435" class="menu-item">
                <a href="https://www.myhost.it">sub menu1</a>
            </li>
        </ul>
    </li>
</ul>

我试图通过复制前一个函数来创建一个新函数，但我无法使其工作，我将 .dropdwon-toggle 替换为“#”，但当我单击链接 # 时，它没有打开，并且没有任何内容document 不会像主题的原始功能那样替换 css 类。有好人可以帮我创建这个小功能吗？如果你需要查看主题的js，这是链接LINK。

提前感谢您的帮助。

** ### 更新 ### **

感谢“stackingjasoncooper”的回答以及“Hoang Tran Son”编辑帖子，确实很抱歉，但这是我在这个社区的第一篇文章，最重要的是我从 Google ITA> ENG 翻译。我尝试了更改，但不幸的是它不起作用，或者更确切地说，它将“.toggled-on ”类放在“a ”标签中，而不是“<ul class="sub-menu> ”标签中，而且一旦您单击“a ”链接，里面的文字就会消失，还插入字段 aria-expanded="false" ，该字段应该属于“按钮”。我丢了一下午但没有结果，确实对不起我的无知。这是点击菜单文本后的html

    <ul><li id="menu-item-2476" class="menu-item" aria-haspopup="true">
        <a href="#" class="toggled-on" aria-expanded="false"></a>
          <button class="dropdown-toggle" aria-expanded="false"></button>
            <ul class="sub-menu">
                <li id="menu-item-435" class="menu-item">
                    <a href="https://www.myhost.it">sub menu1</a>
                </li>
            </ul>
         </li>
     </ul>

在第一条消息中我没有插入所有脚本，可能在第一篇文章中插入的脚本之前的代码存在一些问题。

function( $ ) {
            var body = $( 'body' ), _window = $( window ),  nav, button, menu;

            button = $( '.menu-toggle' );
            menu   = $( '.nav-menu' );

            function initMainNavigation( container ) {

                // Add dropdown toggle that display child menu items.
                container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
                container.find( '.page_item_has_children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );

                // Toggle buttons and submenu items with active children menu items.
                container.find( '.current-menu-ancestor > button' ).addClass( 'toggled-on' );
                container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );

                // Add menu items with submenus to aria-haspopup="true".
                container.find( '.menu-item-has-children' ).attr( 'aria-haspopup', 'true' );

                /* container.find( '.dropdown-toggle' ).click( */
                container.find( '.dropdown-toggle, ul:not(.sub-menu) > .menu-item a' ).click(
                    function( e ) {
                        var _this = $( this );
                        e.preventDefault();
                        _this.toggleClass( 'toggled-on, ' );
                        _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
                        _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
                        _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
                    }
                );
            }

我正在寻找一些 jquery 指南，并且我了解(我希望)“.next ”函数返回下一个邻居标记。因此，如果我在“<button> ”字段中运行，则下一个字段是“<ul> ”(子菜单)。 ul 实际上是必须接收“.toggled-on”类才能打开的字段。如果我的理解是正确的......我应该创建一个新函数，其中仅包含“a ”字段，但包含两次( .next )，这是因为“子菜单”字段后面有两个html标签。我也尝试插入(.next.next)但什么也没有!

再次感谢您的回复。

- 我的决心

早上好，谢谢社区的所有人。我设法让它按我想要的方式工作。我必须插入一个新脚本，正确使用 .next() 或者至少我希望如此。一旦脚本被实现，我意识到如果我点击 href="#" 浏览器就会打开屏幕，我输入了一个条件，看起来它有效。再次感谢整个社区!

        container.find( '.menu-item a' ).click(
            function( e ) {
                var _this = $( this );
                e.preventDefault();
                _this.next().next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
                _this.next( '.dropdown-toggle' ).toggleClass( 'toggled-on' );
                _this.next().attr( 'aria-expanded', _this.next().attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
                if ( _this.attr('href') == "#" ) {}
                else{
                   window.location.href = this; 
                }
            }
        );

Answer 1

如果可以编辑该函数，则无需重新创建该函数。您可以展开 jQuery selector在 click listener在你的函数中:

container.find( '.dropdown-toggle, .menu-item a' ).click(...

基本上这句话是在说:

1. 转到“容器”(在其他地方定义的 jQuery 元素)
2. 在容器内查找具有 dropdown-toggle 类的内容，或在具有 menu-item 类的内容内查找具有 a 标签的内容
3. 为这些内容添加一个点击监听器，以便当点击它们时，会发生以下情况...

虽然 .menu-item a 选择器可能太宽泛，并且包含 sub-menu a 标签并打破它们(e.preventDefault() 将停止链接工作)。所以我们应该使用jQuery not selector更具体地说:

container.find( '.dropdown-toggle, ul:not(.sub-menu) > .menu-item a' ).click(...

a 标记在具有 menu-item 类的内容中，这些内容直接位于没有 sub 的 ul 内部-菜单类