如何从单击JavaScript中的不同元素切换到某个元素？
如何从单击JavaScript中的不同元素切换到某个元素？
提问于 2018-11-06 10:38:56
因此，我对JavaScript和web开发一般都是超级新手，但我正在尝试通过单击另一个元素来找到一种切换元素的方法。
为了澄清，这是我的网站的移动版本。这就是它现在的样子：https://i.stack.imgur.com/F3lVo.png
我要做的是点击左下角的小汉堡菜单，显示我的导航栏，导航栏将从右边滑入。
如果它使解决方案有所不同，我还使用媒体查询隐藏导航栏，一旦网页变得特定的宽度。
到目前为止，汉堡菜单的JavaScript是这样的：
<script>
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
hamburger.toggleClass('active');
return false;
});
});
</script>下面是它激活的CSS：
#hamburger-icon.active .line-1 {
transform: translateY(10px) translateX(0) rotate(45deg);
-webkit-transform: translateY(10px) translateX(0) rotate(45deg);
-moz-transform: translateY(10px) translateX(0) rotate(45deg);
}
#hamburger-icon.active .line-2 {
opacity: 0;
}
#hamburger-icon.active .line-3 {
transform: translateY(-11px) translateX(0) rotate(-45deg);
-webkit-transform: translateY(-11px) translateX(0) rotate(-45deg);
-moz-transform: translateY(-11px) translateX(0) rotate(-45deg);
}这将使汉堡菜单在单击时变为和X，但有没有什么方法可以让它触发导航栏变得可见？如有任何帮助，将不胜感激，谢谢！
回答 2
Stack Overflow用户
发布于 2018-11-06 10:42:00
是的，当然可以。下面是你该怎么做：
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
var navbar = $"#navbar"); //You'll have to edit this line, I'm just guessing
hamburger.click(function() {
hamburger.toggleClass('active');
navbar.toggle();
});
});请注意，您必须更改var navbar = $("#navbar");，因为我不知道您的导航栏是什么。
Stack Overflow用户
发布于 2018-11-06 10:44:57
也许你可以这样尝试：
$( document ).ready(function() {
var hamburger = $('#hamburger-icon');
hamburger.on('click', function(){
hamburger.toggleClass('active');
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53165070
复制相关文章
相似问题
腾讯云开发者
