javascript onmouseout clear html element
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");
}
相关文章:
- Javascript shake html element
- element.html() 在 DOM 就绪时返回空
- HTML DOM - element.appendChild() 的行为不像我期望的那样
- Mootools Element to HTML
- 停用“;element.style”;在css/html中
- Javascript create element and add HTML
- 来自PHP的echo-ed HTML Element不会在JAVASCRIPT中读取
- SVG Element, HTML and JavaScript
- jQuery - 通过 data-for 属性将 .html() 设置为 element
- javascript onmouseout clear html element
- HTML/CSS(/JS?) for Responsive 2 Element Slider
- 在Element中添加HTML可以减少转义问题
- AngularJS:观察指令中的element.html()
- html dom for td element
- Angular2:如何用Javascript从index.html中访问DOM-Element(在Component内部
- HTML: Text in block-element;获得点击的确切位置
- Changing css of an html element with 'Uncaught TypeError
- 实时访问HTML输入并在HTML -element中显示
- html body ondblclick get clicked element
- 如何将“element.offsetParent”与HTML SVG元素一起使用