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

Question

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

我有一个测试网站，其中隐藏了一个手机导航按钮，用CSS媒体查询来设置显示屏以隐藏正常的导航菜单。我也有移动导航菜单的列表项。要显示/隐藏此，我创建了一个.toggleClass() jQuery函数：

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

上述工作，但我想一个.slideToggle()增加了效果菜单。如果我在.toggleClass()下添加这个菜单有点奇怪，如果我点击菜单图标，没有任何反应，但反复点击，它似乎启动生命并开始工作上下滑动。

因为我对此很新，所以我期望我完全做错了，或者过于复杂，可能很简单。

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() docs for good measure：http://api.jquery.com/slidetoggle/