不好：带有 wordpress 的 [jquery] 函数

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，但是当我点击链接时什么也没有#它没有打开并且该文档不会像主题的原始函数那样替换 css 类。有人这么好，可以帮我创建这个小功能吗？ 如果您需要查看主题的js，这是链接LINK。

提前感谢您的帮助。

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

感谢“stackingjasoncooper”的回答和“Hoang Tran Son”编辑帖子，确实很抱歉，但这是我在这个社区的第一篇文章，最重要的是我从谷歌 ITA> ENG 翻译。 我尝试了更改，但不幸的是它不起作用，或者它把“.toggled-on”类放在“a”标签而不是“<ul class="sub-menu>”标签中，而且一旦你点击“@987654331” @"链接里面的文字消失了，还插入了字段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

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

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

基本上那行是说：

1. 转到“容器”（在别处定义的 jQuery 元素）
2. 在容器内查找具有dropdown-toggle 或a 类标签的事物内部具有menu-item 类的事物
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-menu 类的 ul 内部