Unordered lists can be very handy for laying out menu structures. On the project I am currently working I am creating

    ’s embedded inside a
      to display user progress on the public facing portion of a site and then using the same layout for the Admin portion of the site.

      On the public facing site the embedded

        s are being used purely to display progress to the user and they cannot (at this stage) be interacted with. The basic layout is shown. image As the user progresses through the various stages of an application process the orange bars change to green, indicating how far through the application they are.

        Each Section contains HTML mark-up that is maintained by an Admin user and each item inside a section also contains mark-up that is also maintained by an Admin user.

        Now rather than re-invent the wheel is seemed prudent to me to use the same UI to allow the Admin user to navigate to the different sections and items for editing purposes.

        This is where I ran in to a spot of bother for a bit. As the Admin clicks on a section or item it is highlighted to indicate which was selected. The problem I was having though was that when I clicked on an Item the Section is was contained in was highlighted.

        Since I was handling the ‘click’ event of every

      • using jQuery the event from the
      • being clicked was bubbling up to the
      • element above it.

        Easily fixed though so read on.

        So first let me explain how the mark-up is laid out using the images below:



        The root

          element has an ID of ‘navigator’. To wire up the ‘click’ event of all the
        • elements only requires the little snippet of code below:

          $("#navigator li").click(function (event) { $("#navigator li").removeClass("selected"); $(this).addClass("selected"); });

          This registers the ‘click’ event for every

        • element inside the
            element with an ID of ‘navigator’ including any
          • elements contained in
              s inside the
            • ’s of ‘navigator’.

              So when you click on an

            • it removes the ‘selected’ class from all
            • elements inside ‘navigator’ and then adds the ‘selected’ class to the selected item $(this). Simple.

              Except for one small problem. The fact that the ‘click’ event bubbles up to any

            • element that is a child of ‘navigator’ and a parent of $(this). Doh!

              To stop this from occuring and have it fire the ‘click’ event only on the selected

            • however is very easy. We just need to add ‘event.stopPropagation(); ‘ inside the ‘click’ event of our selected
            • as shown below:

              $("#navigator li").click(function (event) { event.stopPropagation(); $("#navigator li").removeClass("selected"); $(this).addClass("selected"); });

              Easy Smile


              Full Source Code is here