Question

Good day, everyone. Could somebody explain why following code does work in Google Chrome and does not in Mozilla Firefox? The aim is to show panel with links (that is the child of element) on the first click on the element, hide it on the second and links should work. In Mozilla when you click on the link (as a child of the child of the element) links-container just hides and stopPropagation doesn’t work.

    reasonToggle = $("#element").toggle(function() {
        $("#links-container").css("visibility", "visible");
        $("#links-container").fadeTo(500, 1);
    }, function() {
        $("#links-container").fadeTo(500, 0, function() {
            $("#links-container").css("visibility", "hidden");
        });
    });
    $("#element a").click(function() {
        event.stopPropagation(reasonToggle);
    ;});

Html structure:

<div id="element"> 
    <div id="links-container">
        <a href=""> Link1 </a>
        <a href=""> Link2 </a>
        <a href=""> Link3 </a>
    </div
</div>

I think it’s not a problem to find workaround but it is really interesting to understand what’s wrong with code.
Thank you.

Answer 1

You’re missing event in the anonymous function of your click handler.

$("#element a").click(function() {
//                            ^^