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 div is lacking in height

The image spills out of its confines

The specified number of columns and width values are being disregarded

Initiating an AJAX call to the Twitter API 1.1 search using jQuery

The marriage of Vue 2.0 and Rails 5: Shifting from Reactive to Declarative Rendering

Customized figcaption formatting separate from the surrounding text

Is it possible to eliminate the css class prefix when using Modular css in React?

AngularJs Datepicker malfunctioning after Data-dismiss operation

Automatically inserting a row into an HTML table

Error message indicating that the jQuery script has not been properly defined in a Wordpress environment

Is there a way to send HTML element values to a MySQL Database in Django using Ajax without utilizing a form?

implement adding a division element to the DOM using the append

Rotate a shape to form a Rhombus at the center

When using jQuery each method, it may return an [object Object]

Glitchy/Crazy CSS3 Animations

The textboxes are not displaying the floating numbers correctly

Is it possible to restrict the application of jquery .css() to a particular media query only?

Issues with FullCalendar functionality in CakePHP 1.2.5 are arising when using jQuery version 1.4.1

The class 'HttpServerUtility' does not include a function called 'encodeStringJavaScript'

Refreshing all parts of a webpage except for a single div