Search code examples
javascriptjqueryonclickparentjquery-events

Issue with calling parent of object onClick


Having a problem with this one-page site where the idea is you click on the links and a box slides down but it also needs a close function to bring it back up. Problem is the close button is in the element to be animated, so it needs to be called by its' parent, I presume. I've tried a variety of different ways to accomplish this but nothing seems to work. If you go to http://upsilon.lunariffic.com/~swstr0 and click About-->Sarah Weintraub, trying click the close link. Nothing happens and no errors either. So what to do? Here's an example:

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery("li.btn-home a").click(function(){
        jQuery(this).parent.slideUp( "slow" );
        return false;
    });
});
</script>

Solution

  • Try like this,

    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("a.close-con").click(function(){
            jQuery(this).parents("div#panel").slideUp( "slow" );
            return false;
        });
    });
    </script>
    

    .parent() will traverse up only one level where as .parents() will traverse parents of parents

    EDIT : Global selector [Requires jQuery 1.7+]

    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery("body").on("click","a.close-con", function(){
            jQuery(this).parents("div#panel").slideUp( "slow" );
            return false;
        });
    });
    </script>