ដោយយើងមាន class មួយហើយមានកូន class ពីរបីទៀតដោយយើងចង់បង្ហាញ html file តាមរយៈ jquery find class
CSS
<style>
.slide-menu{
margin-top: 15px;
}
.slide-menu .box{
background-color: bisque;
}
.slide-menu .box ul li a{
text-decoration: none;
display: block;
padding: 10px;
}
.slide-menu .box ul li a:hover{
background-color: yellow;
}
.slide-menu .box ul li a i{
float: right;
margin-top: 5px;
}
.slide-menu .box ul li .sub-menu{
background-color: beige;
width: 90%;
margin-left: 5%;
display: none;
}
.slide-menu .box ul li:hover .sub-menu{
display: block;
}
HTML
<body>
<div class="container">
<div class="row">
<div class="col-xl-3 slide-menu">
<div class="box">
<!--insert data-->
</div>
</div>
<div class="col-xl-9 main-article">
main
</div>
</div>
</div>
</body>
Jquery
<script>
$(document).ready(function(){
let text = `<ul>
<li>
<a href="">Facebook <i class="fa-solid fa-angle-right"></i></a>
<ul class="sub-menu">
<li>
<a href="">Facebook 1</a>
</li>
<li>
<a href="">Facebook 2</a>
</li>
<li>
<a href="">Facebook 3</a>
</li>
</ul>
</li>
<li>
<a href="">Google <i class="fa-solid fa-angle-right"></i></a>
</li>
<li>
<a href="">Apple <i class="fa-solid fa-angle-right"></i></a>
</li>
</ul>`
$('.slide-menu').find('.box').html(text)
})
</script>
0 Comments