SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)

    can you onclick a child but NOT it's parent?

    I am using Jquery and have a simple script that expand and collapses ( to a 10px square) a menu ( an UL) when you click on the UL. The problem is cliking on the LI or anchor links within the LI, ALSO collapses the menu.

    I tried using CSS to set the z-index of the LIs ( after setting position to relative, of course) , but that isnt working. I thought children elements where rendered IN FRONT of their parents anyway, and thus if you clicked on an LI wou weren ALSO clicking on the UL. But apparently I am wrong.

    I am hoping not to have to add a separate toggle button to my menu. Is there any way to get it so that the LI can be clicked without setting on the onclick for it's parent UL?

    SCRIPT:
    var toggle=false;
    $(function(){
    $("#inner").click(function(){
    var $leftX=$(this);
    $leftX.animate({
    left: parseInt($leftX.css('left'),10) == 0 ?
    (-$leftX.outerWidth()+20) : 0 ,


    height: parseInt($leftX.css('height'),10) == 1 ?
    "8em" : "1em"



    });
    });
    });


    CSS:
    * { padding:0; margin:0}
    .slide{ overflow: hidden; position: relative; height:8em; background: silver; }
    #inner {width:8em; background: orange; position: absolute; left:0 ; height:9em}


    HTML:
    <div class="slide">
    <!--<a id="but" href="#">Menu</a>-->
    <ul id="inner">
    <li id="home"><a href="#">item<span></span></a></li>
    <li id="news"><a href="#">item<span></span></a></li> <li id="home"><a href="#">item<span></span></a></li>
    <li id="news"><a href="#">item<span></span></a></li> <li id="home"><a href="#">item<span></span></a></li>
    <li id="news"><a href="#">item<span></span></a></li>

    </ul><!--box-->
    </div>

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    events bubble up to their ancestors
    http://www.quirksmode.org/js/events_order.html

    http://docs.jquery.com/Events/jQuery.Event
    you could either assign a click event handler to the li elements, and then call stopPropagation(), or you could leave it as is and have your current event handler check the target of the event, and ignore it if it's not a ul element.

  3. #3
    SitePoint Zealot atetlaw's Avatar
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think your problem will be if you want the links within LIs to be clickable normally, where will the user click to close the menu? The UL is a parent element to the LIs but what part of the UL is clickable outside of the LIs?

    A lot of menus have a 'twistie' next to the UL to open and close it.

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    atelaw,

    well, I was thinking that if the even didnt bubble up clicking on the Anchor tags( which would then be inline elements) would activate the links, but clicking anywhere else would collapse the menu. additionally there is padding at the bottom of the UL

  5. #5
    SitePoint Zealot atetlaw's Avatar
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    crmalibu's answer is the one you'll need then. In your event listener function for the UL you'll have to test the event target to see if it was an anchor tag or not.

  6. #6
    SitePoint Zealot atetlaw's Avatar
    Join Date
    Feb 2007
    Location
    Melbourne, Australia
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an example on the jquery site you could modify:

    This is just an example, but you could use this as the basis for the UL click event handler.

    Code:
    function handler(event) {
      var $target = $(event.target);
      if( !$target.is("li a") ) {
        // close the menu
      }
    }

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,827
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Thank you!

  8. #8
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll also want to check that it's not an LI, I presume. So, it would be something like this:

    Code JavaScript:
    // atetlaw's code
    function handler(event) {
      var $target = $(event.target);
      if( !$target.is("li, li a") ) {
        // close the menu
      }
    }

    Or, you could do something like this:

    Code JavaScript:
    function handler(event) {
        if (event.target === this) {
            // ...
        }
    }

    This confirms that the bound element (this) is the same as the event target. In any other cases (e.g. when the target is an anchor) the condition will fail.
    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
  •