<HTML>
<head>
<meta charset="utf-8">
<style>
/*selecting all the ul in the class menu*/
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none
}
/*name of object element : menu,
adding something at where : before*/
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
/*here open is an attribute of menu, should be connected without a space, dot operator*/
.menu.open .title::before {
/*it can have open because the menu is span ele*/
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div id = "sweeties" class="menu">
<span class="title">Sweeties (click me!)</span>
<ul>
<li>Cake</li>
<li>Donut</li>>
<li>Honey</li>
</ul>
</div>
<script>
let menu = document.getElementById('sweeties');
let title = menu.querySelector('.title');
//selecting an element which are included in class "title"
//just as if i am writing an css selector
//cuz thats how querySelector coordinates
title.onclick = function(){
menu.classList.toggle('open');
//toggle : one argument : if class exists(opened), remove it, return false (close)
//if not,(chosed) add it and return true (opened)
//classlist is a read only property that returns a live DOMTokenList
//collection of the class attributes of the element
};
/*OPEM*/
</script>
</body>
</HTML>
<head>
<meta charset="utf-8">
<style>
/*selecting all the ul in the class menu*/
.menu ul {
margin: 0;
list-style: none;
padding-left: 20px;
display: none
}
/*name of object element : menu,
adding something at where : before*/
.menu .title {
font-size: 18px;
cursor: pointer;
}
.menu .title::before {
content: '▶ ';
font-size: 80%;
color: green;
}
/*here open is an attribute of menu, should be connected without a space, dot operator*/
.menu.open .title::before {
/*it can have open because the menu is span ele*/
content: '▼ ';
}
.menu.open ul {
display: block;
}
</style>
</head>
<body>
<div id = "sweeties" class="menu">
<span class="title">Sweeties (click me!)</span>
<ul>
<li>Cake</li>
<li>Donut</li>>
<li>Honey</li>
</ul>
</div>
<script>
let menu = document.getElementById('sweeties');
let title = menu.querySelector('.title');
//selecting an element which are included in class "title"
//just as if i am writing an css selector
//cuz thats how querySelector coordinates
title.onclick = function(){
menu.classList.toggle('open');
//toggle : one argument : if class exists(opened), remove it, return false (close)
//if not,(chosed) add it and return true (opened)
//classlist is a read only property that returns a live DOMTokenList
//collection of the class attributes of the element
};
/*OPEM*/
</script>
</body>
</HTML>
댓글
댓글 쓰기