防止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元素重疊，變得明顯嵌套

回答

相關問題