CODEWITHSUNDEEP
javascript
Marvin Klein
Marvin Klein

Reputation: 1746

Trigger something when specific element is clicked

I want to trigger an event when a specific item is clicked in this nav-menu.

<div class="sidebar-menu">
    
    <ul class="menu">
        <li class="sidebar-title">Menu</li>

        <li class="sidebar-item">
            <a href="/" class="sidebar-link active">
                <i class="bi bi-grid-fill"></i>
                <span>Dashboard</span>
            </a>
        </li>
        
        <li class="sidebar-item">
            <a href="/Counter" class="sidebar-link">
                <i class="bi bi-grid-fill"></i>
                <span>Counter</span>
            </a>
        </li>

        <li class="sidebar-item  has-sub">
            <a href="#" class="sidebar-link">
                <i class="bi bi-stack"></i>
                <span>Components</span>
            </a>
            <ul class="submenu ">
                <li class="submenu-item ">
                    <a href="component-alert.html">Alert</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

I want to run some code whenever a sidebar-item is clicked but only if it doesn't contain the has-sub class as well.

This is my current approach:

let sidebarEl = document.getElementById("sidebar")
sidebarEl.addEventListener("click", function () {
    var w = window.innerWidth;
    if (w <= 991) {
        sidebarEl.classList.remove("active");
    }
});

This one works fine when I click anywhere within the sidebar. But how can I limit it to my scenario only?

Upvotes: 0

Views: 44

Answers (3)

Jubewe
Jubewe

Reputation: 26

This works for me:

Be careful, you have to use class, not id as selector

let sidebarEl = document.getElementsByClassName("sidebar-item");
for(item in [...sidebarEl]){
    console.log([...sidebarEl][item]);
    [...sidebarEl][item].addEventListener("click", ev => {
        console.log("add")
        var w = window.innerWidth;
        if (w <= 991) {
            sidebarEl.classList.remove("active");
        }
    });
    
};

Upvotes: 0

playunits
playunits

Reputation: 1

You could add your 'click' Event Listener only to the relevant elements by using document.querySelectorAll(filter) and specify your Filter as .sidebar-item:not(.has-sub)

Example:

window.addEventListener('load', (event) => {
  var els = document.querySelectorAll('.sidebar-item:not(.has-sub)');
  
  for(var i = 0; i<els.Length; i++){
    var el = els[i];
    el.addEventListener('click', (event) => {      
      //Your code here      
    });
  }
});
<div class="sidebar-menu">
    
    <ul class="menu">
        <li class="sidebar-title">Menu</li>

        <li class="sidebar-item">
            <a href="/" class="sidebar-link active">
                <i class="bi bi-grid-fill"></i>
                <span>Dashboard</span>
            </a>
        </li>
        
        <li class="sidebar-item">
            <a href="/Counter" class="sidebar-link">
                <i class="bi bi-grid-fill"></i>
                <span>Counter</span>
            </a>
        </li>

        <li class="sidebar-item  has-sub">
            <a href="#" class="sidebar-link">
                <i class="bi bi-stack"></i>
                <span>Components</span>
            </a>
            <ul class="submenu ">
                <li class="submenu-item ">
                    <a href="component-alert.html">Alert</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

Upvotes: 0

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

You can check if the target element is a list item (<li>) and that it does not have the class has-sub.

const sidebarMenuEl = document.querySelector('.sidebar-menu');

const onMenuClick = ({ target: { classList, innerText, tagName } }) => {
  if (tagName === 'LI' && !classList.contains('has-sub')) {
    console.log('Clicked on LEAF:', innerText);
  }
};

sidebarMenuEl.addEventListener('click', onMenuClick);
.as-console-wrapper { max-height: 3rem !important; }

li {
  border: thin dashed red;
  padding: 0.25rem;
  cursor: pointer;
  font-size: smaller;
}
<div class="sidebar-menu">
  <ul class="menu">
    <li class="sidebar-title">Menu</li>
    <li class="sidebar-item">
      <a href="/" class="sidebar-link active">
        <i class="bi bi-grid-fill"></i>
        <span>Dashboard</span>
      </a>
    </li>
    <li class="sidebar-item">
      <a href="/Counter" class="sidebar-link">
        <i class="bi bi-grid-fill"></i>
        <span>Counter</span>
      </a>
    </li>
    <li class="sidebar-item  has-sub">
      <a href="#" class="sidebar-link">
        <i class="bi bi-stack"></i>
        <span>Components</span>
      </a>
      <ul class="submenu ">
        <li class="submenu-item ">
          <a href="component-alert.html">Alert</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

Upvotes: 1

Related Questions