[英]Javascript change element properties onmouseover onmouseout
[英]javascript onmouseout clear html element
我試圖弄清楚如何清除JavaScript onmouseleave事件上特定HTML ID的內容。 我的onmouseover效果很好,但是onmouseout卻不能。
這是一個導航欄(正在進行中),因此當用戶將鼠標懸停在標題上時,它將顯示子鏈接,但是當他們離開該菜單時,它應該關閉。
我研究的所有內容都使我一無所獲...我正在尋找有關如何完成此方案的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());
}
該代碼看起來不錯。 您需要在mouseout上刪除或隱藏DOM元素。
編輯->演示: http : //jsfiddle.net/uENE7/
document.getElementById('theHeaderTag1').onmouseout = function () {
document.getElementById('theHeaderTag0').removeChild("Level1")
}
要檢查是否觸發了mouseout事件,請添加控制台日志消息。
document.getElementById('theHeaderTag1').onmouseout = function () {
console.log("mouseout event triggered");
document.getElementById('theHeaderTag0').removeChild("Level1");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.