Question

使用菜单链接作为选择器，我现在苦苦挣扎了几天。它适用于相同内容的非wordpress版本，但是当谈到WP时它会让我发疯。以下是youtube链接，其中包含解释和行为：https://youtu.be/SFx8TyPWhLg

我尝试了多个代码，不同的选择器路径：

nav.mobile>ul>li.menu-item-has-children>a
li.menu-item-has-children>a
.expand>a
.expand > a

等等。

当我检查它的长度时，它可以正常工作（使用此代码）：

if ($('nav.mobile>ul>li.menu-item-has-children>a').length ) {
    // Do something
}

但它没有做需要做的事情。这是我的jQuery代码（所有与li作为选择器一起使用）：

$('.expand>a  ').click(function () {
    $('.sub-menu').addClass('is_open');
    $('nav.mobile').addClass('is_submenu_open');

        setTimeout(function() {
            var offset = $('.is_open').offset();
             $('.close_menu').width(offset.left);
        }, 500)

    });

$(".expand>a ").on('click',function(event){
        event.preventDefault();

        $(this).parent().find("ul").addClass("is_open");
        $("nav.mobile").addClass('is_submenu_open');

        setTimeout(function() {
            var offset = $('.is_open').offset();
             $('.close_menu').width(offset.left);
        }, 500)
    });


 $(".expand>a").click(function(event){
    event.preventDefault();
    if (event.target !== this)
    return;
        $(this).find(".sub-menu:first").addClass(function() {
            $('.sub-menu').addClass("is_open");
            $('nav.mobile').addClass('is_submenu_open');
                setTimeout(function() {
                    var offset = $('.is_open').offset();
                     $('.close_menu').width(offset.left);
                }, 500)
    });
 });

以下是菜单的HTML输出：

<nav class="nav-header mobile" itemscope itemtype="http://schema.org/SiteNavigationElement">
    <ul id="menu-main-menu" class="menu genesis-nav-menu">
        <li id="menu-item-56" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-56"><a href="http://www.rfr.dev/" itemprop="url"><span itemprop="name">Home</span></a></li>
        <li id="menu-item-2077" class="expand menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2077"><a href="#" itemprop="url"><span itemprop="name">What we do</span></a>
            <ul class="sub-menu">
                <li id="menu-item-1883" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1883"><a href="http://www.rfr.dev/what-we-do/search-acquisitions/" itemprop="url"><span itemprop="name">SEARCH &#038; ACQUISITIONS</span></a></li>
                <li id="menu-item-1884" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1884"><a href="http://www.rfr.dev/what-we-do/project-management/" itemprop="url"><span itemprop="name">PROJECT MANAGEMENT</span></a></li>
                <li id="menu-item-1890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1890"><a href="http://www.rfr.dev/what-we-do/interior-architecture-design/" itemprop="url"><span itemprop="name">INTERIOR ARCHITECTURE &#038; DESIGN</span></a></li>
                <li id="menu-item-1424" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1424"><a href="http://www.rfr.dev/what-we-do/property-advisory/" itemprop="url"><span itemprop="name">ADVISORY</span></a></li>
                <li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="http://www.rfr.dev/what-we-do/investment/" itemprop="url"><span itemprop="name">Investment</span></a></li>
                <li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="http://www.rfr.dev/what-we-do/home-management/" itemprop="url"><span itemprop="name">HOME MANAGEMENT</span></a></li>
            </ul>
        </li>
        <li id="menu-item-333" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-333"><a href="http://www.rfr.dev/case-histories/" itemprop="url"><span itemprop="name">Case Histories</span></a></li>
        <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://www.rfr.dev/rfr-scrapbook/" itemprop="url"><span itemprop="name">RFR Scrapbook</span></a></li>
        <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://www.rfr.dev/news/" itemprop="url"><span itemprop="name">News &#038; Press</span></a></li>
        <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://www.rfr.dev/team/" itemprop="url"><span itemprop="name">Team</span></a></li>
        <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="http://www.rfr.dev/contact/" itemprop="url"><span itemprop="name">Contact</span></a></li>
    </ul>
</nav>

我只是出于想法它出了什么问题。请帮忙。

干杯，克里斯

Answer 1

请尝试这个并让我知道课程is_open是否已添加到子菜单中：

$(".expand > a > span").on('click',function(event){
    event.preventDefault();

    console.log("test");
    $(this).closest("li.expand").find("ul").addClass("is_open");
    $("nav.mobile").addClass('is_submenu_open');

    setTimeout(function() {
        var offset = $('.is_open').offset();
        $('.close_menu').width(offset.left);
    }, 500)
});

Answer 2

发现它！问题是由css的这一部分做出的

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
    left: auto; //exactly this style
    opacity: 1;
}

一般来说，它与处理菜单下拉列表的Genesis本机Superfish.js有关。

简单更改我的mobile.css钉了它

.menu .menu-item > a:focus + ul.sub-menu,
.menu .menu-item.sfHover > ul.sub-menu {
    left: 0;
    opacity: 1;
}

感谢@AndyTschiersch的帮助！

jQuery选择器不适用于WP菜单项锚点

2 个答案: