2

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?

4 Answers 4

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();
});
Sign up to request clarification or add additional context in comments.

Comments

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

Comments

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/

Comments

0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.