Override onclick event in javascript

Question

I have one problem. Actually I have this structure: jsfiddle link

When I click on "Link example 2 with accordion" it does expand the ul.
But when I click on any link inside this, it becomes hidden because links under "Link example 2 with accordion" are inside <li class="accordion">.

My question is: How can I stop this behaviour?

Bharath S · Accepted Answer · 2015-06-28 19:55:33Z

2

Add a class to child

<ul>
    <li><a href="#">Link example 1</a> </li>
    <li class="accordion">
        <a href="#">Link example 2 with accordion</a>
        <ul class="child" style="display: none;">
            <li><a href="#">Link inside accordion 2</a></li>
            <li><a href="#">Link inside accordion 3</a></li>
        </ul>
    </li>
    <li><a href="#">Smth</a> </li>
</ul>

Script

$(".child").click(function(e) {
    e.stopPropagation();
});

answered Jun 28, 2015 at 19:55

Bharath S

3745 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nillervision · Accepted Answer · 2015-06-28 23:25:55Z

1

Just use event.stopPropagation() on the child elements. You don't even need a class

$("li > ul").click(function(event){
    event.stopPropagation();
});

fiddle: https://jsfiddle.net/Nillervision/0gzx9Lv8/#base

answered Jun 28, 2015 at 23:25

Nillervision

4412 silver badges10 bronze badges

Comments

Dhiraj · Accepted Answer · 2015-06-28 23:03:57Z

0

Attach the click handler to anchor tag instead of just accordion. Something like this

$(".accordion a").click(function (e) {
    var closestLi = $(this).closest('li');
    if (closestLi.hasClass('active')) {
        closestLi.children('ul').slideUp();
        closestLi.removeClass('active');
    } else {
        closestLi.children('ul').slideDown();
        closestLi.addClass('active');
    }
});

Here is a demo https://jsfiddle.net/dhirajbodicherla/e7bm4mcf/2/

answered Jun 28, 2015 at 23:03

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Comments

Jeroen Vervaeke · Accepted Answer · 2015-06-28 23:21:27Z

You could make your code check if you're actually clicking the li element. If not we do nothing in the click handler.

I think this is the cleanest solution:

        $( ".accordion").click(function(e) {
            // Check if the parent of the target is the same as the .accordion we bound the event to
            if (e.target.parentElement !== this) return;
            
            if ($(this).hasClass('active')){
                $(this).children('ul').slideUp();
                $(this).removeClass('active');
            }else{
                $(this).children('ul').slideDown();
                $(this).addClass('active');
            }
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
                       <li><a href="#">Link example 1</a> </li>
                       <li class="accordion">
                           <a href="#">Link example 2 with accordion</a>
                           <ul style="display: none;">
                               <li><a href="#">Link inside accordion 2</a></li>
                               <li><a href="#">Link inside accordion 3</a></li>
                           </ul>
                       </li>
                       <li><a href="#">Smth</a> </li>
                   </ul>

Collectives™ on Stack Overflow

Override onclick event in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related