CODEWITHSUNDEEP
jqueryanimationclickchildren
oneandonlycore
oneandonlycore

Reputation: 480

jquery disable animation by click on children elements

I have some list elements, which will be collapsed when the user click on a parent list element. The Problem is, when the use click on a child list item, the animation also starts. 

    <ul>
        <li class="folder">foo -- animation shall be enabled here
            <ul>
                <li><a href="http://google.com/" target="_blank">google</a></li>
                <li><a href="#" >item2</a></li>
                <li><a href="#" >item3</a></li>
                <li><a href="#" >item4</a></li>
            </ul>
        </li>
        <li class="folder">bar -- and animation shall be enabled here
            <ul>
                <li><a href="#" >item1</a></li>
                <li><a href="#" >item2</a></li>
                <li><a href="http://heise.de" target="_blank">Heise</a></li>
                <li><a href="#" >item4</a></li>
            </ul>
        </li>
    </ul>

how can I prevent the animation by clicking on the child items ? thanks in advance!

Upvotes: 0

Views: 265

Answers (3)

Alex K
Alex K

Reputation: 7217

You can instead stop immediate propagation of all events like this:

$(function() {
    $('li li').on('click', function(e) {
        e.stopImmediatePropagation();
        alert('Hi from inner <li>!');
    });
    $('li').on('click', function() {
        alert('Hi from parent <li>!');
    });
});

Upvotes: 0

oneandonlycore
oneandonlycore

Reputation: 480

Oh, Found my own solution

$('li.folder').on('click', function(event){
    if(event.target === this){
        $(this).children().animate({
            height:'toggle'
        },600);
    }
});

Thank you Anyway!

Upvotes: 0

Marikkani Chelladurai
Marikkani Chelladurai

Reputation: 1430

$('li').on("click",function(){
    $( this ).parent( ".folder" ).stop( true, true );
});

Will work on this

Upvotes: 1

Related Questions