Question

我使用自定义wordpress菜单作为侧边栏元素（在视觉作曲家布局中制作补充工具栏）。

现在问题是完整的框是打开下拉菜单的触发器，这意味着永远不能激活主项链接。

我很想让箭头成为子菜单打开的触发器，但由于箭头和菜单项文本在同一个'ahref'中，所以无法找到任何方法。

这迫使我在菜单中复制菜单项。

由wordpress创建的标记

<li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-325 current_page_item menu-item-333"><a href="http://www.site.nl/link/" target="_blank">Dorp</a></li>

使用“after：”css语句添加向下箭头。

#PB .widget_nav_menu .menu-item-has-children a:after {
    content: "\f107";
    font-family: FontAwesome;
}

代码i THINK 与之相关

 /**
         * Custom menu widget toggles
         *
         * @since 2.0.0
         */
        customMenuWidgetAccordion: function() {
            var self = this;

            // Open toggle for active page
            $( '.widget_nav_menu .current-menu-ancestor', self.config.$siteMain ).addClass( 'active' ).children( 'ul' ).show();

            // Toggle items
            $( '.widget_nav_menu', self.config.$siteMain ).each( function() {
                var $hasChildren = $( this ).find( '.menu-item-has-children' );
                $hasChildren.each( function() {
                    $( this ).addClass( 'parent' );
                    var $links = $( this ).children( 'a' );
                    $links.on( 'click', function( event ) {
                        var $linkParent = $( this ).parent( 'li' );
                        var $allParents = $linkParent.parents( 'li' );
                        if ( ! $linkParent.hasClass( 'active' ) ) {
                            $hasChildren.not( $allParents ).removeClass( 'active' ).children( '.sub-menu' ).slideUp( 'fast' );
                            $linkParent.addClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideDown( 'fast' );
                        } else {
                            $linkParent.removeClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideUp( 'fast' );
                        }
                        return false;
                    } );
                } );
            } );

        },

简而言之：如何才能使图标可点击以激活下拉菜单，并使按钮的其余部分将我发送到正确的页面。

Answer 1

如果没有看到标记，我认为<a>是这样的？

<a href="page.html">Dorp <i class="arrow-down"></i></a>

箭头向下是箭头，您可以执行以下操作：

$(document).ready(function(){
   $(document).on('click', function(e){
         if($(e.target).hasClass('arrow-down')){

              // If the target has the class 'arrow-down' preventDefault to stop normal behavior
              e.preventDefault();

              // Function to display dropdown

         }
    });
})

你可以see it in action on this JsFiddle。

UPDATE ：由于此箭头是在WordPress菜单上使用伪类创建的，因此事情并非如此简单。我建议使用自定义助行器来实现您的目标。不幸的是，我无法自己快速汇总一个例子，但我可以指出这个链接which covers exactly what you're trying to do

我刚才想到的另一种可能的解决方案，不一定是理想的解决方案，就是在加载页面后使用jQuery将箭头添加到包含子菜单的所有<a>。

我已经使用您提供的代码更新了这个答案，详细阐述了我将如何实现它：

将创建伪元素的CSS更改为类：

#PB .widget_nav_menu .menu-item-has-children a .arrow-down {
    content: "\f107";
    font-family: FontAwesome;
}

在那之后，看看下面，我评论了我把代码附加到箭头等等。这应该可行，但是我无法构建一个jsFiddle来提供一个有效的例子：

/**
* Custom menu widget toggles
*
* @since 2.0.0
*/
        customMenuWidgetAccordion: function() {

            var self = this;

            // Append the arrows here
            var i = $('<i>').attr({
                class: 'arrow-down'
            });
            $('.menu-button-has-children a').append(i);

            // Open toggle for active page
            $( '.widget_nav_menu .current-menu-ancestor', self.config.$siteMain ).addClass( 'active' ).children( 'ul' ).show();

            // Toggle items
            $( '.widget_nav_menu', self.config.$siteMain ).each( function() {

                var $hasChildren = $( this ).find( '.menu-item-has-children' );

                $hasChildren.each( function() {

                    $( this ).addClass( 'parent' );
                    var $links = $( this ).children( 'a' );

                    $links.on( 'click', function( event ) {

                        // Here is our preventDefault if the target is arrow-down
                        if($(event.target).hasClass('arrow-down')){
                            // If the target has the class 'arrow-down' preventDefault to stop normal behavior
                            event.preventDefault();
                        }

                        var $linkParent = $( this ).parent( 'li' );
                        var $allParents = $linkParent.parents( 'li' );

                        if ( ! $linkParent.hasClass( 'active' ) ) {
                            $hasChildren.not( $allParents ).removeClass( 'active' ).children( '.sub-menu' ).slideUp( 'fast' );
                            $linkParent.addClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideDown( 'fast' );
                        } else {
                            $linkParent.removeClass( 'active' ).children( '.sub-menu' ).stop( true, true ).slideUp( 'fast' );
                        }

                        return false;
                    } );
                } );
            } );

        },

根据<i>的定位方式，一旦将<a>附加到directExecutor，事情可能就会跳出来。我将它设置为绝对定位并将其淡入。

如果你仍然无法让它工作，你能创建一个我可以工作的jsFiddle吗？

Wordpress自定义导航，下拉标题无法点击

1 个答案: