2015-10-03 16 views
0

Я новичок в HTML и JS. Необходимо создать динамический список расширения и свернуть. вар ParentId = document.getElementById ("ABCD") parentId.setAttribute ("данных переключения", "коллапс") parentId.setAttribute ("данные-мишень", "# collapse1") вар тег = document.createElement ("UL"); tag.setAttribute ("ID", "collapse1") tag.appendChild (document.createTextNode ("PQR")) parentId.appendChild (тег)Does element.appendChild (node) применяет свойства родительского узла к дочернему узлу?

Попытка для списка как- ABCD PQR

Итак, в этом случае, когда я нажимаю на ABCD, PQR расширяется/сворачивается. Но проблема заключается в нажатии на PQR, оно снова рушится. Значит, свойства родителя также применяются к дочернему узлу?

ответ

1

Это не значит, что он получает свойства своего родителя, это связано с тем, как обрабатываются события, в частности event bubbling. Когда вы нажимаете дочерний элемент, событие click, если он был запущен для всех родительских элементов того, что вы нажали на

, чтобы отменить событие от пузырьков при нажатии на добавленные элементы, необходимые для event.stopPropagation() внутри обработчика кликов для новых элементов

после добавления их сделать следующее

// tag.appendchild code goes here, then do the following 

document.querySelector("#collapse1").onclick=function(event){ 
    event.stopPropagation(); 
} 

также, я должен упомянуть, все это было бы в 10 раз легче с jQuery

+0

Спасибо, но я могу отключить его? Я могу зарегистрировать конкретное другое событие для дочернего элемента? –

+0

Я обновил свой ответ, вы можете остановить его с помощью 'event.stopPropagation' –

Смежные вопросы