Only apply prevent default on specific levels for better control

Question

Only apply prevent default on specific levels for better control

I am currently working on a menu with submenus. I am facing an issue where when I click on a top-level menu item, I need to use prevent default because they are anchor tags. However, for the submenu items, I do not want to prevent default behavior. I am struggling to find a solution that allows me to differentiate between the two levels of the menu.

<div id="block-menu-block-2">
  <ul class="menu">
    <li>
      <a href="#">1</a>
    </li>
    <li>
      <a href="#">2</a>
      <ul class="menu">
        <li><a href="#">2.1</a></li>
        <li><a href="#">2.2</a></li>
        <li><a href="#">2.3</a></li>
        <li><a href="#">2.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">3</a>
      <ul class="menu">
        <li><a href="#">3.1</a></li>
        <li><a href="#">3.2</a></li>
        <li><a href="#">3.3</a></li>
        <li><a href="#">3.4</a></li>
      </ul>
    </li>
    <li>
      <a href="#">4</a>
    </li>
    <li>
      <a href="#">5</a>
    </li>
    <li>
      <a href="#">6</a>
      <ul class="menu">
        <li><a href="#">6.1</a></li>
      </ul>
    </li>
  </ul>  
</div>

Below is the jQuery code:

$('#block-menu-block-2 ul li').on("click", function() {
if ($(this).children().is('ul')) {
    if ($(this).find('ul').is(':visible')) {
        $(this).find('ul').hide("blind");
        $(this).removeClass('menuItemSelected');
        $(this).find('ul').removeClass('menuItemSelected');
    } else {
        $(this).parent().find('li ul').hide("blind");
        $(this).parent().find('.menuItemSelected').removeClass('menuItemSelected');
        $(this).find('ul').show("blind");
        $(this).addClass('menuItemSelected');
        $(this).find('ul').addClass('menuItemSelected');
    };
    event.preventDefault()
    }
});

For a live example, check out this CodePen link.

javascript jquery html css

Answer 1

Answer №1

Some changes have been made and new content has been added. Unfortunately, I wasn't able to copy it into Codepen from my phone so there may be some issues. The code is presented first, followed by a brief explanation.

$('#block-menu-block-2 ul li').each (function () { 
    var $this = $(this);
    if ($this.find ('ul:first').length > 0) {
        $this.click (function () {
            if ($this.find ('ul:visible').length > 0) {
                $this.removeClass ('menuItemSelected').find ('ul').removeClass('menuItemSelected').hide ('blind');
            } else {
                $this.parent ().find ('ul li').hide ('blind');
                $this.parent ().find('.menuItemSelected').removeClass  ('menuItemSelected');
                $this.addClass ('menuItemSelected').find ('ul').show ('blind').addClass ('menuItemSelected');
            }
        }); 
    }
});
 $('#block-menu-block-2 > ul > li > a').click (function (e) {
    if ($(this).find ('ul:first').length > 0)
        e.preventDefault ();
});

The key point is to apply preventDefault only on the anchor tag when it is directly nested within an li element that is directly inside a ul element which is directly within the block-menu. This can be seen in the last three lines of the code snippet.

The remaining code segment should specifically target li elements containing ul tags for click events. Attempted to optimize by using chaining to reduce jQuery object creation, but might have introduced errors in the process. By removing preventDefault at its original position and following the guidance of the final lines, the desired functionality should be achieved.

Answer 2

Some changes have been made and new content has been added. Unfortunately, I wasn't able to copy it into Codepen from my phone so there may be some issues. The code is presented first, followed by a brief explanation.

$('#block-menu-block-2 ul li').each (function () { 
    var $this = $(this);
    if ($this.find ('ul:first').length > 0) {
        $this.click (function () {
            if ($this.find ('ul:visible').length > 0) {
                $this.removeClass ('menuItemSelected').find ('ul').removeClass('menuItemSelected').hide ('blind');
            } else {
                $this.parent ().find ('ul li').hide ('blind');
                $this.parent ().find('.menuItemSelected').removeClass  ('menuItemSelected');
                $this.addClass ('menuItemSelected').find ('ul').show ('blind').addClass ('menuItemSelected');
            }
        }); 
    }
});
 $('#block-menu-block-2 > ul > li > a').click (function (e) {
    if ($(this).find ('ul:first').length > 0)
        e.preventDefault ();
});

The key point is to apply preventDefault only on the anchor tag when it is directly nested within an li element that is directly inside a ul element which is directly within the block-menu. This can be seen in the last three lines of the code snippet.

The remaining code segment should specifically target li elements containing ul tags for click events. Attempted to optimize by using chaining to reduce jQuery object creation, but might have introduced errors in the process. By removing preventDefault at its original position and following the guidance of the final lines, the desired functionality should be achieved.

Answer 3

Answer №2

Is it possible for you to avoid adding a category to your dropdown menu triggers, like .dropdown-trigger, and then implement the subsequent jQuery:

$(document).on('click', function(e) {
  if ($(e.target).hasClass('dropdown-trigger')) e.preventDefault();
});

Answer 4

Is it possible for you to avoid adding a category to your dropdown menu triggers, like .dropdown-trigger, and then implement the subsequent jQuery:

$(document).on('click', function(e) {
  if ($(e.target).hasClass('dropdown-trigger')) e.preventDefault();
});

Answer 5

Answer №3

To simplify the menu manipulation process, you can focus on attaching the event to <a> elements and then checking if there is a sibling <ul>. If there is, you can prevent the default action.

$('.menu-item-link').click(function(e){
    if( $(this).siblings('ul').length ){
         e.preventDefault();
    }
    // additional menu code here
});

Answer 6

To simplify the menu manipulation process, you can focus on attaching the event to <a> elements and then checking if there is a sibling <ul>. If there is, you can prevent the default action.

$('.menu-item-link').click(function(e){
    if( $(this).siblings('ul').length ){
         e.preventDefault();
    }
    // additional menu code here
});

Only apply prevent default on specific levels for better control

Answer №1

Answer №2

Answer №3

Similar questions

NPM: Handling multiple prehooks with the same name

Django is refusing to display my CSS and JavaScript files - static files

Seeking a material design template for mandatory form patterns

All hyperlinks are displayed as a single entity

Is there a way to drop a pin on the Google Maps app?

What is the best way to connect click events with ExtJS template elements?

How can I optimize my Javascript applications for better search engine rankings?

Eliminate the prefixes of object keys in Node.js

Hide table cells using jQuery if they do not contain a specific content

Positioning divs next to each other in CSS and setting the width of the second

Empty jQuery $.ajax value after post

Dynamic popup in RShiny interface with the ability to be moved around

Maintain HTML formatting when page is refreshed

How do I set up middleware with async/await in NestJS?

Leveraging Webworkers in an Angular application for efficient data caching with service workers in the Angular-CLI

How can I toggle the visibility of a div based on whether a variable is defined or not?

Adding elements to a JSON array in JavaScript/AngularJS

Vuejs components that have checkboxes already selected out of the box

I am having trouble getting text to display properly in a jQuery Mobile dialog

Activating gzip compression using fetch.js