javascript - jQuery 显示和隐藏菜单基础知识

Question

我正在尝试制作一个双菜单，具有点击功能和隐藏&显示基础知识，但我不明白为什么不起作用，你能帮我吗？这是我的脚本:

$(document).ready(function() {

$('#work').click(function(event){
    $(this).addClass("activado"); // add active class
    $("#other,#contacto").removeClass("activado"); // remove active class
    $("#menuother").hide();
    $("#menuwork").show();
});

$('#other').click(function(event){
    $(this).addClass("activado");
    $("#work,#contacto").removeClass("activado");
    $("#menuwork").hide();
    $("#menuother").show();
});

$('#contacto').click(function(event){
    $(this).addClass("activado");
    $("#work,#other").removeClass("activado");
    $("#menuwork").hide();
});
});

我的 html 非常基础，我认为您不需要它，脚本会自己说话。事件类在工作，但隐藏和显示不工作。

非常感谢。

//编辑顺便说一下，我将菜单隐藏在 css 中。

//编辑添加html

<a href="#" id="work" class="inactivo">TopMenu</a>
<a href="#" id="other" class="inactivo">TopMenu</a>
<a href="#" id="contacto" class="inactivo">TopMenu</a>

<div id="#menuwork">
<a href="#" id="SubMenu1" class="inactivo">SubMenu</a>
<a href="#" id="SubMenu2" class="inactivo">SubMenu</a>
<a href="#" id="SubMenu3" class="inactivo">SubMenu</a>
</div>

<div id="#menuother">
<a href="#" id="SubMenu4" class="inactivo">SubMenu</a>
<a href="#" id="SubMenu5" class="inactivo">SubMenu</a>
<a href="#" id="SubMenu6" class="inactivo">SubMenu</a>
</div>

Answer 1

首先，从您的 div 元素的 ID 中删除 #。例如:

<div id="#menuwork">

应该是:

<div id="menuwork">