Question

我有一些隐藏的div显示自己＆＃34; onmousedown。＆＃34;但是，您必须单击链接两次才能使隐藏内容消失。当你点击任何其他内容时，我希望内容消失...＃34; onmousedown＆＃34;链接在页面上，而不必两次单击相同的链接。最后，如果您没有单击该链接两次，并且您单击另一个onmousedown链接，则内容将嵌套并重叠。这是我用来切换可见性的代码：

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

这里是jsfiddle。（原谅我 - 由于某些原因，jquery没有运作。也许有些专家会看到我错误地复制了什么东西，但我认为可以很清楚地看到正在发生的事情 - 想象一下隐藏的东西每个div的内容一下子嵌套在链接下面。）

Answer 1

尝试

<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>

然后

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

演示：Fiddle

为什么你的小提琴不起作用？您在内联模式中使用函数toggleVisibility，其中函数将在全局范围内查找，但您在onload回调中添加了函数定义（在左侧第二个下拉列表中选择了onload）面板）制作一个闭包范围的功能。选择Nowrap Header/Body进行修复。

为什么您的代码无效？每当您执行鼠标悬停时，您需要先隐藏先前打开的导航项，然后打开新的导航项。使用jQuery方法更容易，所以在我的解决方案中我调整了上面给出的jQuery解决方案。

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

1 个答案: