点击汉堡菜单切换显示/隐藏intro logo区域的JS代码问题咨询

核心问题点 #

• 状态变量booleanNoDisplay定义在点击事件回调内部，每次触发点击都会被重置为true，无法保存上一次点击后的状态，状态判断逻辑完全失效
• 同时混用CSS类控制显隐和jQuery的show()/hide()方法，两种控制方式冲突，导致显隐逻辑混乱
• 点击事件触发后第一行就强制给#intro1添加NoDisplay类，未判断当前菜单的展开/收起状态，逻辑顺序错误

修复方案 #

直接用jQuery内置的切换方法即可实现需求，不需要自行维护状态变量，两种可选实现方式如下：

1. 直接用toggle()方法控制显隐：

$('.navbar-toggler').click(function() {
    // 点击自动切换#intro1的显示/隐藏状态
    $('#intro1').toggle();
});

2. 用CSS类切换控制（需保证你的NoDisplay类已定义display: none;样式）：

$('.navbar-toggler').click(function() {
    $('#intro1').toggleClass('NoDisplay');
});

原有代码中多余的类添加、状态判断逻辑可以全部删除，避免冲突。

内容的提问来源于stack exchange，提问作者Hermann