1
\$\begingroup\$

My code is working fine...

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)

 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(2)

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>

\$\endgroup\$

1 Answer 1

1
+50
\$\begingroup\$
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');
    }
}

Change that part to:

if (e.target.nextElementSibling == null) {
    return;
}

e.preventDefault();
e.stopPropagation();
\$\endgroup\$
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.