Question

因此，我一般来说对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，但是有什么办法可以使它触发我的导航栏以使其可见？任何帮助将不胜感激，谢谢！

Answer 1

是的，当然可以。这是您的操作方式：

$( 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");。

Answer 2

也许您可以尝试这样：

$( document ).ready(function() {
  var hamburger = $('#hamburger-icon');
  hamburger.on('click', function(){
    hamburger.toggleClass('active');
  });
});

如何通过单击JavaScript中的其他元素来切换元素？

2 个答案: