Toggle display of list items using jQuery on click event

Question

Toggle display of list items using jQuery on click event

I want to be able to toggle the visibility of my submenus when a link is clicked. Here's an example code snippet:

<ul>
        <li><a href="www.example.com">Test</a></li>
        <li><a href="www.example.com">Test</a></li>
        <li class="submenu">
            <a href="#">Test 2</a>
            <ul class="ul_submenu">
                <li><a href="www.example.com">Test</a></li>
                <li><a href="www.example.com">Test</a></li>
                <li class="submenu_2">
                    <a href="#">Test 3</a>
                    <ul class="ul_submenu_2">
                        <li><a href="www.example.com">Test</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

$( 'li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $("ul.ul_submenu").toggle();
    });

You can view a working example on JSFiddle.

I need the ability to click on a link even if it has child elements, and change the display of the list item. However, I also want to prevent the page from reloading when a link like this is clicked: <a href="#"></a>

jquery html css

Answer 1

Answer №1

Here is a simple jQuery code snippet that allows you to toggle a submenu when clicking on a list item:

$('li a').click(function(e) {
  e.preventDefault();
  $(this).closest("li").find("[class^='ul_submenu']").slideToggle();
});

Check out this Fiddle for demonstration.

Answer 2

Here is a simple jQuery code snippet that allows you to toggle a submenu when clicking on a list item:

$('li a').click(function(e) {
  e.preventDefault();
  $(this).closest("li").find("[class^='ul_submenu']").slideToggle();
});

Check out this Fiddle for demonstration.

Answer 3

Answer №2

Simply include a false return statement in the click callback function. The click() method should have only one callback function, not two. What was your initial plan?

Also, you can avoid using css() and instead utilize show().

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $("ul.ul_submenu").show()
        return false;
    });
});

To make it more dynamic, you could consider structuring it similar to this example for all menu entries. I've made some adjustments to your fiddle: https://jsfiddle.net/sy757gvj/5/

<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu"><a href="#">Test 3</a>
        <ul class="ul_submenu">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

-

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $(this).next().toggle();
        return false;
    });
});

Answer 4

Simply include a false return statement in the click callback function. The click() method should have only one callback function, not two. What was your initial plan?

Also, you can avoid using css() and instead utilize show().

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $("ul.ul_submenu").show()
        return false;
    });
});

To make it more dynamic, you could consider structuring it similar to this example for all menu entries. I've made some adjustments to your fiddle: https://jsfiddle.net/sy757gvj/5/

<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu"><a href="#">Test 3</a>
        <ul class="ul_submenu">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

-

$(function() {
    $('li.submenu a[href="#"]').click(function(e) {
        e.preventDefault();
        $(this).next().toggle();
        return false;
    });
});

Answer 5

Answer №3

To activate the "Test2" submenu, you can use the following code:

$('li.submenu a[href="#"]').click(function(e) {
   e.preventDefault();
   $(this).parent().children("ul.ul_submenu").show();
});

.ul_submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu_2"><a href="#">Test 3</a>
        <ul class="ul_submenu_2">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 6

To activate the "Test2" submenu, you can use the following code:

$('li.submenu a[href="#"]').click(function(e) {
   e.preventDefault();
   $(this).parent().children("ul.ul_submenu").show();
});

.ul_submenu {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><a href="www.example.com">Test</a></li>
  <li><a href="www.example.com">Test</a></li>
  <li class="submenu"><a href="#">Test 2</a>
    <ul class="ul_submenu">
      <li><a href="www.example.com">Test</a></li>
      <li><a href="www.example.com">Test</a></li>
      <li class="submenu_2"><a href="#">Test 3</a>
        <ul class="ul_submenu_2">
          <li><a href="www.example.com">Test</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Answer 7

Answer №4

One way to achieve this is by utilizing the toggle function.

$(document).ready(function(){
    $('li.submenu a[href="#"]').click(function(){
        $("ul.ul_submenu").toggle();
    });
});

Answer 8

One way to achieve this is by utilizing the toggle function.

$(document).ready(function(){
    $('li.submenu a[href="#"]').click(function(){
        $("ul.ul_submenu").toggle();
    });
});

Answer 9

Answer №5

I updated the jquery code as follows:

$('li.submenu').on('click','a[href="#"]',function(e){
    e.preventDefault();
    $("ul.ul_submenu").toggle();
})

It appears to be working fine now. Check it out on this Fiddle: https://jsfiddle.net/y0p13dt7/1/

Answer 10

I updated the jquery code as follows:

$('li.submenu').on('click','a[href="#"]',function(e){
    e.preventDefault();
    $("ul.ul_submenu").toggle();
})

It appears to be working fine now. Check it out on this Fiddle: https://jsfiddle.net/y0p13dt7/1/

Toggle display of list items using jQuery on click event

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The marquee HTML code is not functioning correctly in the Chrome browser

Having difficulty submitting a form with ajax, while accomplishing the same task effortlessly without ajax

When using jQuery to add an item to a List, it disappears immediately after

I attempted various methods but was unable to successfully call the webmethod in the code behind using jQuery Ajax and Knockout

The input field in Angular dynamically populates values into multiple instances of the same text

JavaScript stylesheet library

Slideshow featuring cards with text overlay

Conceal the child elements underneath a selected element using jQuery

Adapting CSS according to input selection

Add a sound file to the server and configure the images based on the server's response

Are we utilizing this JavaScript function properly for recycling it?

Is there a way to refresh a specific element without having to reload the entire page when the button is clicked

consistent height across the div when expanding

How can I make multiple elements in the same column span across multiple rows with CSS Grid?

Using a forward slash in the path for the href attribute in a CSS link within an ejs file

Using jQuery to Send a POST Request and Delete a File when a Button is

Achieving a full-screen div or video that remains fixed in a specific position on the browser window can be done by following these steps

How can I create a redirect link in HTML that opens in a new window

How can I ensure that a div is positioned over another div with the same coordinates across all screen sizes?

Showing nested arrays in API data using Angular