菜单使用jQuery单击.hide（）和.show（）

我正在尝试使用子菜单隐藏和显示单独的div。它对隐藏起作用，但隐藏者无法识别该节目。欢迎提供提示或建议。jQuery代码如下：

$('nav div').click(function(){
    $($branding).css("display", "none");
    $(this).addClass('active');
});

$('nav div.active').click(function(){
    $($branding).css("display", "block");
    $(this).removeClass();
});

---

您可以使用jQuery

toggle（）

函数

示例代码

HTML

在您的情况下，代码类似于：

$('nav div').click(function(){
  $($branding).toggle().toggleClass('active');
});

---

您做得很好，只是做了一些更改：

$('nav div').on("click",function(){
$($branding).css("display", "none");
$(this).addClass('active');
 });

  $('nav div.active').on("click",function(){
$($branding).css("display", "block");
$(this).removeClass('active');
 });

---

这应该会对您有所帮助。

问题是在执行代码时绑定了处理程序。当代码执行时，元素没有

.active

类，因此处理程序没有绑定

一种解决方案是将处理程序绑定到

nav

，然后使用事件委派在当前状态下正确地影响元素。大概是这样的：

$('nav').on('click', 'div:not(.active)', function(){
    $($branding).css("display", "none");
    $(this).addClass('active');
});

$('nav').on('click', 'div.active', function(){
    $($branding).css("display", "block");
    $(this).removeClass();
});

尽管如此，在这种情况下，授权并不是你的最佳解决方案，尽管我认为它值得解释。你应该考虑使用<代码> Twitter < /代码>，如在另一个答案中建议的。

---

您可以在中阅读有关事件委派的更多信息。

而不是

.css（“显示”、“无”）

只需执行

.hide（）

或

.show（）

在

.show（）中是什么情况

不起作用？在

$branding

中有什么？@Adijit-当我单击菜单项时，它会隐藏相应的内容，但当我再次单击以再次显示它（重置）时，它不会响应。@Dhaval-$branding是一个变量，仅用于调用几个类的divs@jeffrey_powers尝试执行

.toggle（）

。另外，您将

$branding

声明为什么？如果它看起来像

$branding=$（'.branding'）然后您只需执行
$branding.toggle（）
而不是
$（$branding）
这与原始代码完全相同。将
单击
更改为
。在（“单击”上，
不会更改任何内容。是的，它仍然不支持代码的第二段。@JamesMontagne如果仔细查看，您会发现，$（this）.removeClass（'active'）；在给定的代码中缺失。jeffrey_powers遗漏了这个，而不是他只编写了$（this）.removeClass（）；.你检查过代码了吗，还是干脆投我一票？@NaveenChandraTiwari关于缺少的
“active”你是对的
您应该对此进行解释。但是，这不起作用。绑定处理程序时，没有要绑定的
nav div.active
。类似地，一旦添加
active
类，原始handler将不会被解除绑定。第一个处理程序将始终激发。@jeffrey\u powers您的小提琴中没有包含jquery，因此它会根本不起作用：
$('nav div').on("click",function(){
$($branding).css("display", "none");
$(this).addClass('active');
 });

  $('nav div.active').on("click",function(){
$($branding).css("display", "block");
$(this).removeClass('active');
 });

$('nav').on('click', 'div:not(.active)', function(){
    $($branding).css("display", "none");
    $(this).addClass('active');
});

$('nav').on('click', 'div.active', function(){
    $($branding).css("display", "block");
    $(this).removeClass();
});