SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru downtroden's Avatar
    Join Date
    Dec 2004
    Location
    illinois
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery menu problem

    found this little piece of code from the jquery site for a expandable menu system
    Code:
    $(document).ready(function() {
      var toggle = function(direction, display) {
        return function() {
          var self = this;
          var ul = $("ul", this);
          if( ul.css("display") == display && !self["block" + direction] ) {
            self["block" + direction] = true;
            ul["slide" + direction]("fast", function() {
              self["block" + direction] = false;
            });
          }
        };
      }
      $("li.menu").toggle(toggle("Down", "none"), toggle("Up", "block"));
      $("li.menu ul").hide();
    });
    and it works like a gem, ORIGINALLY, the .toggle function from the 2nd to last line was hover, i changed to toggle to get a click action instead of hover action BUT now when i click on the links inside of the unordered list, the anchors don't respond, the list closes if the nested li tags don't have a "menu" class and just don't respond period if they do... now if i put it back to hover they work as expected.

    Anyone friendly enough with jquery to tell me why changing this little attribute would cause this much trouble?

    Here's the sample list from the site
    Code:
    <ul id="menu">
      <li class="menu">Sub 1
        <ul>
          <li><a href="">test 1</a></li>
          <li><a href="">test 2</a></li>
          <li><a href="">test 3</a></li>
          <li><a href="">test 4</a></li>
        </ul>
      </li>
      <li class="menu">Sub 2
        <ul>
          <li>test 1</li>
          <li>test 2</li>
          <li>test 3</li>
          <li>test 4</li>
        </ul>
      </li>
    </ul>
    your brain reacts in the same way whether you are
    looking at something or thinking about it...

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The problem is that all elements within li.menu will initiate the toggle function (because the click event has been attached to the whole list item - which includes elements within).

    You could make something happen upon one of the links (children) being clicked - so in effect over-ride the toggle event - try adding this to ur code:

    Code JavaScript:
    $("li.menu li a").click(function(){window.location=this.href})

    It's not a very good way to fix the issue but hopefully it works.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •