的JavaScript的onmouseout清晰的HTML元素

Question

我試圖找出如何清除一個JavaScript OnMouseLeave在事件特定HTML ID的內容。我的onmouseover工作得很好，但是onmouseout沒有。

這是一個導航條（工作正在進行中），這樣當用戶在標題懸停他們的鼠標，它就會暴露子鏈接，但是當他們離開這個菜單，它應該關閉。我已經reseached

一切都使我沒事......我正在尋找如何完成的onmouseout功能，對於這種情況的提示。

謝謝！

下面是我得到了什麼：

 document.getElementById('theHeaderTag1').onmouseover = function() { 
    for (var i = 0; i <= Level1Items.length - 1; i++) { 
     //Print Items in Level1 
     var createLevel1CellTag = document.createElement('tr'); 
     createLevel1CellTag.id = 'Level1'; 
     var Level1TextNode = document.createTextNode(Level1Items[i]); 
     createLevel1CellTag.appendChild(Level1TextNode); 
     document.getElementById('theHeaderTag0').appendChild(createLevel1CellTag); 
    } 
    document.getElementById('theHeaderTag1').onmouseout = function() { 

    } 

我有，我要去這個雖然碰到問題的感覺......但我認爲這將讓我在正確的軌道上。

這裏的所有代碼：

var siteUrl = '/sites/dev/'; 
var theCounter = 0; 
ExecuteOrDelayUntilScriptLoaded(retrieveListItems, "sp.js"); 

function retrieveListItems() { 
var clientContext = new SP.ClientContext(siteUrl); 
var oList = clientContext.get_web().get_lists().getByTitle('myList'); 
var camlQuery = new SP.CamlQuery(); 
camlQuery.set_viewXml("<Where><And><IsNotNull><FieldRef Name='Title' /></IsNotNull> <IsNotNull><FieldRef Name='TitleLink' /></IsNotNull></And></Where>"); 
this.collListItem = oList.getItems(camlQuery); 
clientContext.load(collListItem); 
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed)); 
} 


//Where all the magic happens 
function onQuerySucceeded(sender, args) { 

//Create an Array for each column in the SharePoint List that will be used in the NavPart 
var theHeaders = new Array(); 
var HeaderLinks = new Array(); 
var Level1Items = new Array(); 
var getTheTableTag = document.getElementById('theTable'); 

var listItemEnumerator = collListItem.getEnumerator(); 

while (listItemEnumerator.moveNext()) { 
    var oListItem = listItemEnumerator.get_current(); 
    theCounter += 1; 

    //Build an Array for the column elements. 
    theHeaders[theCounter - 1] = oListItem.get_item('Title'); 
    Level1Items[theCounter - 1] = oListItem.get_item('Level1'); 



}; 
var headersResult = _.uniq(theHeaders); 
var headerLinkResult = _.uniq(HeaderLinks); 

//Create Headers on the Web Part 
for (var i = 0; i <= headersResult.length - 1; i++) { 
    var createTheHeaderTag = document.createElement('th'); 
    createTheHeaderTag.id = 'theHeaderTag' + i; 
    var TheHeaderTagTextNode = document.createTextNode(headersResult[i]); 
    createTheHeaderTag.appendChild(TheHeaderTagTextNode); 
    getTheTableTag.appendChild(createTheHeaderTag); 


} 

document.getElementById('theHeaderTag1').onmouseover = function() { 
    for (var i = 0; i <= Level1Items.length - 1; i++) { 
     //Print Items in Level1 
     var createLevel1CellTag = document.createElement('tr'); 
     createLevel1CellTag.id = 'Level1'; 
     var Level1TextNode = document.createTextNode(Level1Items[i]); 
     createLevel1CellTag.appendChild(Level1TextNode); 
     document.getElementById('theHeaderTag0').appendChild(createLevel1CellTag); 
    } 
    document.getElementById('theHeaderTag1').onmouseout = function() { 

    } 
} 
} 
function onQueryFailed(sender, args) { 
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace()); 
} 

Answer 1

代碼看起來罰款。您需要在mouseout上移除或隱藏DOM元素。

編輯 - >演示：http://jsfiddle.net/uENE7/

document.getElementById('theHeaderTag1').onmouseout = function() { 
    document.getElementById('theHeaderTag0').removeChild("Level1") 
} 

要檢查您的鼠標移出事件是否被觸發，請加控制檯日誌消息。

document.getElementById('theHeaderTag1').onmouseout = function() { 
    console.log("mouseout event triggered"); 
    document.getElementById('theHeaderTag0').removeChild("Level1"); 
}