JavaScript .siblings 方法在 Wordpress 中带有下拉子链接的移动菜单中不起作用

Question

在 bemchemia.pl 网站上，我有一个带有下拉子链接的 Wordpress 移动菜单。我想仅通过单击箭头而不是单击父链接来使用 JavaScript .slideToggle 显示子链接。现在，当我单击箭头或父链接时，子链接就会显示。

下面的功能有效，但我不想通过单击父链接来显示子链接。

$(function () {
    $(".menu-mobile__nav .sub-menu").hide();

    $(".menu-mobile__nav .menu-item-has-children").click(function () {
        $(this).children(".sub-menu").slideToggle('');
    });
});

下面的类似功能应该可以解决我的问题，但它根本不起作用。问题出在哪里？

$(function () {
    $(".menu-mobile__nav .sub-menu").hide();

    $(".menu-mobile__nav .menu-item-has-children .arrow").click(function () {
        $(this).siblings(".sub-menu").slideToggle('');
    });
});

我什至在我的 lcocalhost 上进行了非常简单的测试，检查了这个解决方案并且它有效。

<ul>
    <li class="parent">
        <a href="#">Link</a>
        <span href="#" class="arrow">arrow</span>
        <ul class="child">
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </li>
</ul>

<script>
    $(function () {
        $('.parent .child').hide();

        $(".parent .arrow").click(function () {
            $(this).siblings(".child").slideToggle('');
        });
    });
</script>

Answer 1

您只需更改为正确的类名（您的本地主机代码中就有它）。

更改此：

$(this).siblings(".sub-menu").slideToggle('');

对此：

$(this).siblings(".child").slideToggle('');

您可以在 HTML 中看到子菜单的类是“child”，而不是“sub-menu”。