CODEWITHSUNDEEP
jqueryscroll
Prashanth JC
Prashanth JC

Reputation: 537

jQuery Scroll Event Exception

I have a parent div (id showmenu) within which there is another div (class menu). The menu div is hidden by default and scrolls up or down on showmenu mouseclick. Till here it works fine.

Now, I do not want the menu div to scroll up if any of the links within the menu are clicked.

Here is the html:

<div id="showmenu" style="background-color:#cccccc;padding:10px;">
    Click Anywhere
    <div class="menu" style="display: none;">
        <ul>
        <li><a href="#" class="linkclass">Link1</a></li>
        <li><a href="#" class="linkclass">Link2</a></li>
        <li><a href="#" class="linkclass">Link3</a></li>
    </ul>
    </div>
</div>

And, this is the JavaScript:

$(document).ready(function() {
    $('#showmenu').click(function() {
        $('.menu').toggle("scroll");
    });
});

I do not want the menu div to scroll up if clicking on the menu links and the menu div should scroll up if clicked anywhere else within the showmenu div.

Please help. Thanks.

Upvotes: 0

Views: 84

Answers (2)

Hamix
Hamix

Reputation: 1335

$(document).ready(function () {
    $('#showmenu').click(function () {
        $('.menu').toggle("scroll");
    });
    $(".linkclass").click(function (event) {
        event.stopPropagation();
        // Do something
    });
});

DEMO

event.stopPropagation()

Upvotes: 1

Ganesh Jadhav
Ganesh Jadhav

Reputation: 2848

Try this:

$(document).ready(function() {
    $('.menu a').click(function(event) {
        event.stopPropagation();
    });
});

This code will ensure that the showmenu's click()is not called when the links are clicked, thus preventing the scroll.

Upvotes: 2

Related Questions