jQuery - 切换类 + 幻灯片切换未按预期工作

Question

我对学习HTML，CSS和JavaScript相对较新。我正在创建一种测试网站，仅用于学习目的，并开始深入研究移动响应式网站。

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

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

以上是有效的，但我想在菜单中添加一个.slideToggle()以达到效果。如果我将其添加到.toggleClass()下方，因为$('.clicked').slideToggle();菜单的行为有点奇怪，如果我单击菜单图标，则没有任何反应，但是反复单击，它似乎开始栩栩如生并开始上下滑动。

由于我对此相当陌生，我希望我这样做完全错误，或者过于复杂化可能非常简单的事情。

Answer 1

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

$('#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/