菜单li锚上的jQuery单击功能-slideToggle不起作用（WordPress）答案

【问题标题】：jQuery click function on menu li anchor - slideToggle not working (WordPress)菜单li锚上的jQuery单击功能-slideToggle不起作用（WordPress）
【发布时间】：2015-05-28 09:21:48
【问题描述】：

好的，我想要一个 div 在单击菜单项时显示在它下方。

这是我的 HTML（取自 WordPress 源代码）：

<li id="menu-item-990" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-top-level menu-item-top-level-7">
    <a href="#" style="height: 88px; line-height: 88px;">
        <span class="avia-bullet"></span>
        <span class="avia-menu-text">Sign in</span>
        <span class="avia-menu-fx">
            <span class="avia-arrow-wrap">
                <span class="avia-arrow"></span>
            </span>
        </span>
    </a>
</li>
<div id="text-6" class="widget clearfix widget_text">
    <h3 class="widgettitle">How to sign in</h3>
    <div class="textwidget"></div>
</div>

还有一些 CSS（应该是内联的，还是应该在 JS 函数中应用一些 CSS？）

#text-6 { visibility: hidden; }

然后是我的 JS：

$(document).ready(function() {
    $('#menu-item-990 a').click(function() {
        event.preventDefault();
        $('#text-6').slideToggle("fast");
    });
});

我会很感激任何答案！希望你能帮忙:)

谢谢！

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

您在函数中忘记了参数event：

$(document).ready(function() {
    $('#menu-item-990 a').click(function(event) {
            event.preventDefault();
            $('#text-6').slideToggle("fast");
    });
});

【讨论】：

【解决方案2】：

您需要在点击处理程序中传递event。

$('#menu-item-990 a').click(function(event) {
    event.preventDefault();
    $('#text-6').slideToggle("fast");
});

您一定是在浏览器控制台上遇到错误

【讨论】：

【解决方案3】：

首先，在函数function(event)中传递“event”作为参数。

我也相信 slideToggle 不会影响可见性，它只会在 none 和 block 之间切换并改变你的高度。设置显示：无；到您的项目，应该可以正常工作。

【讨论】：