Javascript 防止onmousedown元素重叠，变得明显嵌套

我有几个隐藏的div，它们显示自己是“onmousedown”。然而，你必须点击链接两次，隐藏的内容才能消失。我希望当你点击页面上的任何其他“onmousedown”链接时，内容消失，而不必点击同一链接两次。最后，如果您没有两次单击该链接，而是单击了另一个onmousedown链接，则内容将嵌套并重叠。下面是我用来切换可见性的代码：

function toggleVisibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

这是我的建议。（请原谅——由于某些原因，jquery无法正常工作。也许一些专家会看到我在哪里错误地复制了内容，但我认为人们可以非常清楚地看到发生了什么事情——想象一下，每个div的隐藏内容都会同时嵌套在链接下面。）

试试看

<div class="nav">
    <a href="#hello">Hello</a>
    <a href="#hi">Hi</a>
    <a href="#howdy">Howdy</a>
</div>

<div class="sub" id="hello">a
    Hello hello hello
</div>

<div class="sub" id="hi">
    Hi hi hi hi hi hi
</div>

<div class="sub" id="howdy">
    Howdy Howdy Howdy
</div>

演示：

为什么你的小提琴不起作用？您在内联模式下使用了函数

toggleVisibility

，该函数将在全局范围内查找，但您在

onload

回调（在左面板的第二个下拉菜单中选择onload）中添加了函数定义，使函数在闭包范围内。选择

Nowrap头/体

进行修复

---

为什么你的代码不起作用？无论何时进行鼠标移动，都需要先隐藏以前打开的导航项，然后打开新的导航项。使用jQuery方式要容易得多，所以在我的解决方案中，我采用了上面给出的jQuery解决方案

非常感谢，阿伦。我能够实现这一点，它工作得非常完美。比以前好多了。但是，有没有可能通过“点击”而不是在链接上“悬停”来实现这一点？非常感谢。完美的最后一个问题：如果我使用hover方法（甚至是click方法），我是否可以这样设置：当用户将鼠标悬停在页面上的某个其他元素上时（例如，图像），所有隐藏的div将再次消失？@user2985093或

jQuery(function () {
    var $subs = $('.sub');
    $('.nav a').on('mouseenter', function () {
        var $target = $($(this).attr('href'));
        $subs.not($target).hide();
        $target.toggle();
    });
});