but I want to remove below thosebelow those(1) lines of code from my example code example code(2)(JS Code)... ifIf I remove those code athen a tag is not working. (aa tag do not open link or href is not working)...
Is it a good approach to done it by wringwriting those code? ( if any problem will occur for ajaxajax request etc for this ) ? & Is there aany way to work aa tag by removingremoving those line of code ? Please help me.
Wanna Remove Those Code(1)
Example Code(2)
but I want to remove below those lines code from my example code (JS Code)... if I remove those code a tag not working (a tag do not open link or href not working)...
Is it a good approach to done it by wring those code ( any problem will occur for ajax request etc ) ? & Is there a way to work a tag by removing those line code ?
Wanna Remove Those Code
Example Code
but I want to remove below those(1) lines of code from my example code(2)(JS Code). If I remove those code then a tag is not working. (a tag do not open link or href is not working).
Is it a good approach to done it by writing those code? ( if any problem will occur for ajax request for this ) ? & Is there any way to work a tag by removing those line of code ? Please help me.
Wanna Remove Those Code(1)
Example Code(2)
dispatch event listener problem after click
My code is working fine...
but I want to remove below those lines code from my example code (JS Code)... if I remove those code a tag not working (a tag do not open link or href not working)...
Is it a good approach to done it by wring those code ( any problem will occur for ajax request etc ) ? & Is there a way to work a tag by removing those line code ?
Wanna Remove Those Code
if (e.target.nextElementSibling == null) {
if (e.target.getAttribute('target') != null) {
window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
} else {
window.location.href = e.target.getAttribute('href');
}
Example Code
const lists = document.querySelectorAll('.sidenav nav ul ul')
lists.forEach(function (el) {
el.className = 'sub-menu';
el.style.height = 0 + "px";
})
document.querySelectorAll(".sidenav nav ul li a ").forEach(el => el.addEventListener('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (e.target.nextElementSibling == null) {
if (e.target.getAttribute('target') != null) {
window.open(e.target.getAttribute('href'), e.target.getAttribute('target'));
} else {
window.location.href = e.target.getAttribute('href');
}
}
let el = e.target.parentElement.children[1];
let ul = e.target.parentElement.closest('ul');
if (ul) {
ul.querySelectorAll('ul').forEach(function (item) {
item.style.height = 0 + 'px';
})
}
if (typeof el == 'undefined') return;
if (parseInt(getComputedStyle(el).height) > 0) {
el.style.height = 0 + "px";
} else {
el.style.height = el.scrollHeight + "px";
}
return false;
}));*,*::after,*::before{
box-sizing: border-box;
}
html,body{
margin: 0;
padding: 0;
}
nav{
padding: 20px;
height: 4rem;
width: 250px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
nav ul li {
background: tomato;
width: 100%;
}
nav ul li a{
display: block;
padding: 10px;
text-decoration: none;
}
nav ul ul {
margin-left: 20px;
height: 0;
transition: all .2s ease-in ;
}
nav ul ul li {
width: 100%;
background: aqua;
}<aside class="sidenav">
<nav>
<ul>
<li><a href="https://dev.to/">Home</a></li>
<li><a href="">Cat </a>
<ul>
<li><a href="https://dev.to/" >Cat 1</a></li>
<li><a href="https://dev.to/" target="_blank">Cat 1 </a></li>
</ul>
</li>
<li><a href="https://dev.to/">about</a></li>
<li><a href="https://dev.to/">about</a></li>
<li><a href="https://dev.to/">about</a></li>
</ul>
</nav>
</aside>