SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Evangelist runeveryday's Avatar
    Join Date
    Jul 2009
    Posts
    436
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    why the javascript toggle code doesn't work?

    I have added the Prototype library to my site, then add the following code. but when i click the span, the ul content is not hidden. the link href still work.

    Code:
    Event.observe(window, 'load', function() {
        Event.observe('.block-category li.parent span', 'click', function(e){
            $('.block-category li.parent ul').toggle();
            e.preventDefault();
    
        });
    });
    html:

    Code:
    <div class="block block-category">
    <li class="level-top  parent">
    <a href="example.com/...."><span>text one</span></a>
    <ul>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    <li><a><span>....</span></a></li>
    </ul>
    </li>
    
    <li class="level-top"><a href="..."><span>....</span></a></li>
    
    </div>
    thank you

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi there,

    You need the $$ method which selects DOM elements that match a CSS selector.
    Your code would then become:

    Code JavaScript:
    Event.observe(window, 'load', function() {
      $$('.block-category li.parent span')[0].observe('click', function(e){
        $$('.block-category li.parent ul')[0].toggle();
        e.preventDefault();
      });
    });


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
  •