Question

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

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

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

以上工作正常，但我想在菜单中添加.slideToggle()以获得效果。如果我将.toggleClass()添加到$('.clicked').slideToggle();作为p { display: inline-block; border-bottom: 2px solid #000; }，菜单会有点奇怪，如果我点击菜单图标，没有任何反应，但反复点击，它似乎生机勃勃并开始工作向上和向下滑动。

由于我对此很陌生，我希望我这样做完全错了，或者使某些事情变得简单。

Answer 1

尝试删除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/

jQuery - toggleClass + slideToggle无法按预期工作

1 个答案: