Очистить html-элемент onmouseout в Javascript

Я пытаюсь понять, как очистить содержимое определенного HTML-идентификатора в событии JavaScript onmouseleave. Мой 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());
}

person frank billy    schedule 30.08.2013    source источник
comment
Вы можете дать jQuery шанс...   -  person ErickBest    schedule 30.08.2013


Ответы (1)


Код выглядит нормально. Вам нужно удалить или скрыть элементы 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");
}
person Selvam Palanimalai    schedule 30.08.2013
comment
не могли бы вы скопировать и вставить точное сообщение об ошибке. Я хочу знать, какая строка выдает эту ошибку. - person Selvam Palanimalai; 30.08.2013
comment
ошибка должна быть на removeChild. Параметр — это идентификатор, который нужно удалить внутри узла DOM theHeaderTag0. developer.mozilla.org/en-US/docs/Web/ API/Node.removeChild - person Selvam Palanimalai; 30.08.2013
comment
Строка 62: document.getElementById('theHeaderTag0').removeChild() - person frank billy; 30.08.2013
comment
Я получаю ошибку несоответствия типа, когда пытаюсь передать параметр theHeaderTag0 - person frank billy; 30.08.2013
comment
Я создал для него jsfiddle. Это работает там jsfiddle.net/uENE7. В вашем коде есть небольшая ошибка. Вы назначаете один и тот же идентификатор всем элементам tr. Вы должны класс. - person Selvam Palanimalai; 30.08.2013