javascript - jQuery-toggleClass + slideToggle无法正常工作

我是学习HTML，CSS和JavaScript的新手。我正在创建一种测试网站，仅用于学习目的，并且已开始涉足移动响应型网站。

我有一个测试站点，其中隐藏了移动导航按钮，并带有CSS媒体查询以将显示设置为阻止和隐藏常规导航菜单。我也有移动导航菜单的列表项。为了显示/隐藏这个，我创建了一个.toggleClass() jQuery函数：

function clicktouchmenu()
{
    $('#menuico').on('click touch', function()
    {
        var $mobmen = $(".mobilemenu");
        $mobmen.toggleClass('clicked');
    });
};

以上工作正常，但我想在菜单中添加.slideToggle()才能生效。如果我将其添加到.toggleClass()下方，作为$('.clicked').slideToggle();，则菜单会有点奇怪，如果我单击菜单图标，则什么也没有发生，但是反复单击，它似乎栩栩如生并开始上下滑动。

因为我对此很陌生，所以我期望自己做的完全错误，或者过于复杂，这可能很简单。

最佳答案

尝试删除clicked类，并在slideToggle()上仅使用mobilemenu，如下所示：

$('#menuico').on('click touch', function()
{
    var $mobmen = $("#mobilemenu")
    $mobmen.slideToggle();
});

我认为问题在于，如果clicked类切换是否显示菜单，则它会干扰slideToggle()。这是因为slideToggle()的目的是使某些东西看起来像在滑入和滑出视图（也就是切换是否隐藏但带有动画）。因此，您只需要一个，而slideToggle()显然包括动画。

我添加了一个小提琴，但这只是一个演示，因为我不知道您的HTML或CSS是什么样的：

小提琴：https://jsfiddle.net/668mucca/3/

链接到jQuery文档中slideToggle()上的条目以取得良好效果：http://api.jquery.com/slidetoggle/

关于javascript - jQuery-toggleClass + slideToggle无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/43273994/