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

我有几个隐藏的divs，它们显示自己“onmousedown”。但是，您必须点击链接两次以隐藏内容才能消失。当您点击页面上的任何其他“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的隐藏内容都出现同时嵌套下面的链接）

来源

2013-11-15 user2985093

尝试

<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解决方案。

来源

2013-11-15 00:06:17

非常感谢Arun。我能够实现这一点，它完美的作品。比以前好多了。但是，是否可以通过“点击”而不是“悬停”链接来完成这项工作？ – user2985093

@ user2985093请参阅http://jsfiddle.net/arunpjohny/7DJjY/2/ –

非常感谢。完善。最后一个问题：如果我使用悬停方法（或甚至点击方法），我可以如何设置它，以便当用户在页面上的某个其他元素（例如图像）上方悬停时，所有隐藏的divs会再次消失？ – user2985093

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

回答

相关问题