WP将徽标添加到菜单中心，而忽略子菜单? [英] WP add logo into center of menu whist ignoring sub menus?

问题描述

使用下面的jQuery形式，我可以将徽标动态居中在wordpress菜单的中间，但是当我向主导航添加子菜单时，徽标消失了.我将如何重新编写此代码以打折任何子菜单?

Using the following jQuery form another post I'm able to dynamically center a logo in the middle of a wordpress menu but when I add a sub menu to the main nav, the logo dissapears. How would I re-write this to discount any sub menus?

jQuery:

var position = $("ul#main_nav li").length-2;
                        var i = 0;
                        $('ul#main_nav li').each(function() {
                            if(i == position/2) {
                            $(this).after('<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">');
                            }
                            i++;
                        });

HTML:

<ul id="#main_nav">
    <li>ITEM1</li>
    <li>ITEM2
        <ul class="sub-menu">
            <li>SUB-ITEM1</li>
            <li>SUB-ITEM2</li>
            <li>SUB-ITEM3</li>
        </ul>
    </li>
    <li>ITEM3</li>
    <li>ITEM4</li>
    <li>ITEM5</li>
    <li>ITEM6</li>
</ul>

推荐答案

如果有任何其他人遇到此问题，请使用以下解决方法.

If by any chance anyone else comes across this issue, here's the fix..

var position = $("ul#main_nav li.menu-item-object-page").length-2;
var i = 0;
    $('ul#main_nav li.menu-item-object-page).each(function() {
        if(i == position/2) {
        $(this).after('<img src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="Logo" class="logo-img">');
    }
 i++;
});

Wordpress为顶级导航列表项提供了类.menu-item-object-page，但不会将其应用于子菜单项，因此，通过更具体地确定要定位的元素，我得到了想要的结果.

Wordpress gives top level nav list items the class .menu-item-object-page but doesn't apply this to sub menu items so by being a bit more specific about what elemnets to target I've got the result I wanted.

这篇关于WP将徽标添加到菜单中心，而忽略子菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！