Question

这是我的jQuery：

$("#nav-button").click(function() {
$("#hamburger-menu").slideToggle("slow");
$('#nav-button').css('background','url(assets/close.png)');
                            });

现在这段代码让你点击#nav-burger打开＃汉堡菜单，让它可见（默认情况下它用CSS隐藏）。 slideToggle是一个切换，所以如果再次单击它会向上滑动（在花式动画后返回显示：css中没有）。

您还会注意到"$('#nav-burger').css('background','url(assets/close.png)');"行，它会将＃nav-burger元素上的背景图像更改为close.png。

我想让它成为＆＃34; slideToggle＆＃34;只有一种方式;我的意思是我喜欢它向下滑动的动画，但我宁愿它在点击＃nav-button而不是在动画中向上滑动时突然消失。

我也想要

$('#nav-button').css('background','url(assets/close.png)');
                                });

点击后返回上一张图片。

所以这就是我的尝试：

$(".opennav").click(function() {
$("#hamburger-menu").css('display','none');
$('#nav-burger').css('background','url(assets/hamburger-menu.svg)');
$( "#nav-burger" ).removeClass( "opennav" );
                                });

认为添加课程＆＃34; opennav＆＃34;然后导航按钮会让我在jQuery中选择它，但这部分代码根本不起作用。

我不确定为什么 - jQuery可以不选择自己使用过＆addglass＆＃39;的元素。功能？

这是一个我还在学习的课程，但我已经坚持了近5个小时..

Here's a jFiddle这表明了我的意思;请注意＆＃39; X＆＃39;永远不会改回菜单图标，理想情况并非如此。你也会看到我在修复这个问题上的可怜尝试。

Answer 1

这样的事情：

https://jsfiddle.net/tLffy6dc/1/

<强> JS：

$("#nav-burger").click(function() {
  if ($(this).hasClass("opennav")) {
    $("#hamburger-menu").css('display','none');
    $('#nav-burger').css('background','url(http://connor.la/sandbox/havefunkid/hamburger-menu.svg)');
    $( "#nav-burger" ).removeClass( "opennav" );
  }
  else {
    $("#hamburger-menu").slideToggle("slow");
    $('#nav-burger').css('background','url(http://connor.la/sandbox/havefunkid/close.png)');
    $( "#nav-burger" ).addClass( "opennav" );
  }
});

jQuery - 使用addClass，定位该类，然后通过2次点击删除它？

1 个答案: