Question

Here is an except of javascript.

    function showContent(layer, animate) {

        $("#background").show();
        $("footer").hide();
        $("#announcement").hide();

        $("#content").html($("#" + layer + "_html").comments());

        $("nav").children().each(function() {
            if ($(this).attr("id").search(layer) == -1) {
                $(this).addClass("inactive");
            } else {
                $(this).removeClass("inactive");
            }
        });

        if (animate == true) {
            $('html,body').animate({scrollTop: $("nav").offset().top - 16 - 40}, 200, "swing");
        }

        // setUpHover();

        setupFullScreen();
        setupImageViewers();
        setupHovers();

        // Load analytics tracking
        setTimeout(function() {
            $("#tracker").attr("src", "/track/" + layer + "/")
        }, 500);

        window.location.hash = layer;
    }

    // Set up the on click functions for the different menus
    $("nav").children().click(function() {
        showContent($(this).attr("id").split("_")[1], true);
    });

Here is an excerpt of html:

http://pastie.org/2929494

Now here’s my question. With that js and html it does what it is suppose to. However when I add a needed div inside the nav as such it breaks:

http://pastie.org/2929497

I imagine the problem is in the original js above, there are two lines about (“nav”).children and imagine with my new code they are actually now grandchildren or such. So most likely need to make minor adjustments to both of those lines, but not sure to what.

Thanks in advance!

Answer 1

I believe the line you’re asking about is :

$("nav").children().click(function() {

You could do:

$("nav").children().children().click(function() {

to get the “grand children”. However, I would probably use a class instead to make this a bit more resilient.

$("nav").find(".navLink").click(function() {

Where navLink is a class that you add to each of the elements which you want to be clickable.