Javascript 隐藏菜单链接上的内容二次单击

Javascript 隐藏菜单链接上的内容二次单击,javascript,jquery,html,css,Javascript,Jquery,Html,Css,下面是一些代码和一个问题:如何在保存现有功能的情况下再次单击菜单链接按钮后启用切换效果?所以我需要在第二次点击时隐藏内容第二次点击链接1隐藏内容1,等等。所有其他工作人员都工作得很好,但我的jQuery中有些东西坏了。另外,可能我这里有太多无用的代码行。如果可以,请纠正我 //下拉菜单功能 var anchor=$'。主导航a'; 变量菜单=$'。菜单'; anchor.clickfunction{ 如果$this.getAttribute'href'.hasClass'is-visible'

下面是一些代码和一个问题:如何在保存现有功能的情况下再次单击菜单链接按钮后启用切换效果?所以我需要在第二次点击时隐藏内容第二次点击链接1隐藏内容1,等等。所有其他工作人员都工作得很好,但我的jQuery中有些东西坏了。另外,可能我这里有太多无用的代码行。如果可以,请纠正我

//下拉菜单功能 var anchor=$'。主导航a'; 变量菜单=$'。菜单'; anchor.clickfunction{ 如果$this.getAttribute'href'.hasClass'is-visible'{ this.parent.sibbins.removeClass'is-visible'; menu.notthis.removeClass'is-visible'。addClass'is-hidden'; }否则{ $this.addClass'active'; anchor.notthis.removeClass'active'; $this.getAttribute'href'.removeClass'is-hidden'.addClass'is-visible'; } 返回false; }; $document.mouseupffunction e{ //如果单击的目标既不是菜单,也不是菜单的中心 if!menu.ise.target&&menu.hase.target.length==0{ anchor.removeClass'active'; removeClass'is-visible'。addClass'is-hidden'; } }; //单击链接时隐藏菜单 $'。菜单a'。单击功能{ anchor.removeClass'active'; removeClass'is-visible'。addClass'is-hidden'; }; .是隐藏的{ 显示:无; } .可见{ 显示:块; } .主动{ 背景:绿色; } .主导航{ 填充:0; } 李少民{ 显示:内联块; 位置:相对位置; 宽度:180px; 背景:灰色; 文本对齐:居中; } .main_nav li a{ 显示:块; 填充:30px 0 1px; 光标:指针; 文字装饰:无; } .菜单{ 背景:灰色; 宽度:1000px; 高度:50px; }
看起来锚上的onClick函数并没有像您想象的那样工作。下面是我要做的:

首先,让我们去掉其他功能,鼠标点击和菜单点击。你以后可以详细说明这些问题。 对于手头的问题,您的锚定单击功能,只需切换div。您可以使用hrefs选择要显示/隐藏的div。 只需从href中删除破折号并将其发送到jQuery选择器。然后你可以切换它。为了便于理解,我将代码分成多行

希望这有帮助

anchor.click(function() {
    var href = $(this).attr("href").replace('#', '');
    var div = $('#' + href);
    $('div.menu').not(div).hide();
    $(div).toggle();
});

这里有一个

您真正想要的是,当您单击相应的链接并再次通过第二次单击将其隐藏时,只需隐藏除所选div之外的其他div。 它不需要那种凌乱的javascript代码

$function{ $'.clicker'.ClickFunction{ $'.menu'。隐藏; $'link\'+$this.attr'target'。切换; }; }; .菜单{ 显示:无; }
我找到了解决办法。只有以下内容:

// Dropdown menu functionality

var anchor = $('.main_nav li a');
var menu = $('.menu');

anchor.click(function () {
  if ($(this.getAttribute('href')).hasClass('is-visible')) {
    $(this).parent().siblings().removeClass('is-visible');
    menu.not(this).removeClass('is-visible').addClass('is-hidden');
  } else {
    $(this).addClass('active');
    menu.removeClass('is-visible').addClass('is-hidden');
    anchor.not(this).removeClass('active');
    $(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
  }
  return false;
});

// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
    anchor.removeClass('active');
    menu.removeClass('is-visible').addClass('is-hidden');
});

// close menu when clicking inside of it
$('body').click(function(e) { 
  var el = e.target || e.srcElement;
  // if the target of the click isn't the other menu nor navigation link
  if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) { 
    anchor.removeClass('active'); 
    menu.removeClass('is-visible').addClass('is-hidden'); 
  }
});

非常感谢你的编辑,德鲁!谢谢,例如,如何在单击下一个链接后关闭已打开的div?为此,您只需隐藏其他div,然后使用以下命令切换相应的div:$'div.menu'.notdiv.hide;。我更新了笔。是的,这就是我想要的。如果它对你有效,那么请接受答案,让我们继续其他努力。这不是我问题的完整答案,我在下面添加了更合适的答案。它已完全工作。请注意,如果您单击其他链接,以前的链接本身将被隐藏。谢谢,但它工作不正常。我需要隐藏每个div及其链接并保护现有功能。