0

我有一些隐藏的 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';
}

这是jsfiddle。（请原谅我——由于某种原因 jquery 无法运行。也许一些专家会看到我错误地复制了东西，但否则我认为人们可以很清楚地看到发生了什么——想象一下每个 div 的隐藏内容都出现了立即嵌套在链接下方。）

4

1 回答 1

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();
    });
});

演示：小提琴

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

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

于 2013-11-15T00:06:17.573 回答